Pega Web Analytics

Web Analytics Basics:

Web analytics is the collection, reporting, and analysis of website data. The focus is on identifying measures based on your organizational and user goals and using the website data to determine the success or failure of those goals and to drive strategy and improve the user's experience.

Pega web analytics(PWA):

We are already having this component in pega marketplace where we can download and import in our application to track the application data.

Please access the below link to download the component for version specific.

https://community.pega.com/marketplace/integrations/pega-web-analytics?

Step-1: Download the Pega web analytics component from market place and import it in the application.

Step-2: After importing the PWA Component. Add the component in Application definition and save it,Now log off and log into the application.

Step-3: Now you should be able to see Web Analytics Page from,

Configure > User Interface > Web Analytics.

Step-4: Click on Add New, below image we can see Access Group have options All, Individual Access group related to application it means we can track for particular access group user's or all.

Step-5: Now we have an option to select web analytics vendor today we will use google as our vendor.

Configure Application in Google Analytics:

Step-1: Now we have to create account in google analytics https://analytics.google.com/analytics/web/

Step-2: In Account Setup step-1 make sure to give proper account name like below image.

Step-3: In Property Setup-2 give property name, reporting timezone, currency like below.

Step-4: In ending of property setup click on advanced options select "create a universal analytics property" and provide the website URL like below.

And make sure first radio button is selected "Create both a Google Analytics 4 and a Universal Analytics Property".

Step-5: In About your business give the details and at last click on create button and accept the terms and conditions.

Step-6: After creating it, A dashbord will appeared like below if you click on all accounts on right side analtics logo it will show all the Properties and Apps associated to the account.

Step-7: Below image we can see ther are two apps for the account we created.

1.First app is Universal Analytics Property (UA).

2.Second app is Google Analytics 4 (GA4).

Step-8: From the above we can see Universal Analytics Id(UA) [UA-252545439-1], And to know GA4 Account id click on the Second Apps it will show GA4 account id on Home screen like below image GA4 ID [G-B26PCTWVC5].

Step-9: Now let's get back to pega to configure this in Web analytics.

From below i have selected HRApps:Users as access group so it will applicable to this AG only.

And portal will be populated automaticaly. Then select web analytics vendor as google.

And in Meta Tags give author, application-name,keywords like below so that these will included in <head> element as meta data.

Step-10: In next App data tab select two toggle options and give data like below event classification are used to send data google analytics

"Case Creator" is used to send data who created the new case,

"Portal Search" is used to send data if anything searched in global search bar of User portal.

"Case Type" is used to send name of the case was created.

"Case ID" is used to send the case id of the new case which was created.

Note: I am just sending data using predefined properties in App data so if any data that stores in that properties of pyWorkPage data from clipboard will be send to analytics.

Step-11: Now in page tab give the code like below and change Universal Analytics ID & GA4 ID based on your analytics account. And add vendor JS code also.

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-252545439-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-252545439-1');
gtag('config', 'UA-252545439-1', {'groups': 'click'}); /*click analytics*/
gtag('config', 'UA-252545439-1', {'groups': 'biz'}); /*biz analytics*/
gtag('config', 'UA-252545439-1', {'groups': 'both'}); /*both analytics*/
gtag('config', 'G-B26PCTWVC5');
</script>

gtag('event', {2}, {
'send_to' : ['click','biz','both'],
'event_category': {1},
'event_label': {3}});

Step-12: Now click on submit button after adding the code in page tab.It's look the below image once it is submitted.

Step-13: Let's test it by logging in user portal through one of the operator. And test by searching something in search bar & by creating new case.

Step-14: After searching and creating cases let's check it in google analytics weather the data was captured or not.

Step-15: If you navigate to UA account from the all accounts and go to Realtime Reports from left navigation and click on the Events to see the captured data.

Step-16: From above image you can see '1' user was using the application and below image you can see the events are captured based on category.

Step-16: I have created two cases in user portal if you select event category - "Case ID" from events list it will show the case id's along with operator who accessing/created the case like below image.

Step-17: Now go back and select - "Case Type" from events list if any filters are there you can remove. Below image shows the case type created by the operator/ accessing by the operator.

Step-18: Same to for "Portal Serach" those are also stored you can see the below image.

---------------------------------------------------------------------------------

Now we have one more scenario to track the link's / URL's accessed by operator in portal.

Step-1: Like below image we have some URL's related to courses so if the operator accesses the URL the data related to URL should be captured in the analytics GA4 account.

Step-3: First of all, configure links like above image. I have configured two tables.

Step-4: And in dev studio we have to set the Cell read-only classes, Cell read-write classes with class name for that URL property.

For let side table URL property I have given as "marketing_courses" and for right side table URL property I have given as "insurance_courses".

Step-5: Now we have to create a HTML Fragment to set the class name for <a> tag of each hyper link line table.

<script>
$('.marketing_courses').each(function(i){
$(this).find('a').addClass('Marketing Course');
});
$('.insurance_courses').each(function(i){
$(this).find('a').addClass('Insurance Course');
});
</script>

Step-6: From the above code you can see if the read-write / read only class of that row URL property matches then it will set that class name to the <a> tag of that hyperlink.

Step-7: Now include above newly created HTML fragment in "UserWorkForm".

Step-8: Now if you go to user portal and inspect the links and you can see the class is being added to the <a> tag of that hyperlink.

Step-9: So now when ever we click on that link it will send the link data along with class name to analytics.

Step-10: Go to the google analytics and click on the GA4 account from all accounts from top header.

Step-11: After that click on Reports from left navigation and clik on the Realtime under Reports.You will see like below image.

Step-12: Now scroll down right side for by Tab and we see "click" event.

Now select "click" Event.

Step-13: It will show the data related to "click" event.

Step-14: Now select "link_classes" which stores the class name which we earlier set at application through HTML Fragment. So, whenever we click on that link the class name will added to "link_classes".