In the past I have written about implementing Google Analytics in PeopleSoft.
Using analytics.js
Using ga.js
If we look at the latest script provided by Google Analytics, it uses the new JavaScript tagging framework gtag.js. This framework allows us to send event data to different products (Analytics, AdWords, DoubleClick, etc.) without managing them separately.
More on gtag.js: https://developers.google.com/gtagjs/
Global Tracking Code Snippet: https://developers.google.com/analytics/devguides/collection/gtagjs/
If we want to implement Google Analytics in PeopleTools using this latest framework, we cannot simply take the sample code provided by Google and include it in a HTML object in PeopleTools. If you notice, even in my previous Google Analytics posts, I modified the sample code to make it PeopleTools friendly. This is because the script tags within the sample code (which involves loading an external script) will cause issues with PeopleTools when created as a JavaScript (HTML) object.
So, we need a way to first load the gtag.js (external) script and then execute the subsequent code provided in the sample. Here is a good example of how we can load an external script using javascript.
https://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
Using this approach, I re-wrote the Google Analytics javascript sample as follows. The loadScript function is very similar to the cskLoadJS function in my JavaScript Injection Framework - CSK_FL_BOOTSTRAP_JS.
Script for reference
Note: You will need to find and replace UA-XXXXXXXX-Y with your GA_TRACKING_ID.
CSK_ANALYTICS_JS JavaScript (HTML) Object
Next we need to find a way to inject this javascript within all PeopleSoft pages. A simple approach would be to add a line of code at the end of a global delivered javascript such as PT_COMMON or PT_UTIL. For example:
Alternatively, we could use a JavaScript Injection Framework as described here:
https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html
Regardless of whether we use analytics.js or gtag.js, when we setup the Google site configuration, we should only include the hostname in the default URL.
E.g.: If this is our login URL
http://pi023.hcm92.com:8000/psp/ps/EMPLOYEE/HRMS/?cmd=login
The Default URL should be configured as follows:
Using analytics.js
Using ga.js
If we look at the latest script provided by Google Analytics, it uses the new JavaScript tagging framework gtag.js. This framework allows us to send event data to different products (Analytics, AdWords, DoubleClick, etc.) without managing them separately.
More on gtag.js: https://developers.google.com/gtagjs/
Global Tracking Code Snippet: https://developers.google.com/analytics/devguides/collection/gtagjs/
If we want to implement Google Analytics in PeopleTools using this latest framework, we cannot simply take the sample code provided by Google and include it in a HTML object in PeopleTools. If you notice, even in my previous Google Analytics posts, I modified the sample code to make it PeopleTools friendly. This is because the script tags within the sample code (which involves loading an external script) will cause issues with PeopleTools when created as a JavaScript (HTML) object.
So, we need a way to first load the gtag.js (external) script and then execute the subsequent code provided in the sample. Here is a good example of how we can load an external script using javascript.
https://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
Using this approach, I re-wrote the Google Analytics javascript sample as follows. The loadScript function is very similar to the cskLoadJS function in my JavaScript Injection Framework - CSK_FL_BOOTSTRAP_JS.
Script for reference
Note: You will need to find and replace UA-XXXXXXXX-Y with your GA_TRACKING_ID.
CSK_ANALYTICS_JS JavaScript (HTML) Object
Next we need to find a way to inject this javascript within all PeopleSoft pages. A simple approach would be to add a line of code at the end of a global delivered javascript such as PT_COMMON or PT_UTIL. For example:
Alternatively, we could use a JavaScript Injection Framework as described here:
https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html
Regardless of whether we use analytics.js or gtag.js, when we setup the Google site configuration, we should only include the hostname in the default URL.
E.g.: If this is our login URL
http://pi023.hcm92.com:8000/psp/ps/EMPLOYEE/HRMS/?cmd=login
The Default URL should be configured as follows:
sorry if this results in a double post but I cannot tell if my previous post worked or not.
ReplyDeleteIf I inject my JavaScript in both PT_COMMON and PT_UTIL will there be any analytic duplication? It seems that PT_COMMON is used by classic and PT_UTIL is used more for fluid but I'm not sure if there is overlap. I bring it up because our site is mainly fluid and I was not seeing as many counts when I used PT_COMMON and since changing to PT_UTIL, my counts have increased from 2-15 to 100+
Thanks,
Tom
PT_UTIL is included in PT_COMMON as well as PT_COMMON_FMODE.
DeleteIf you want to move your code back to PT_COMMON that is fine. But as you figured, that may only execute in Classic pages. So, you will also need to include it in PT_COMMON_FMODE.
Also, a good way to troubleshoot is to add console.log messages in your script. Then you can see if the script is executing multiple times, etc.
Thanks Sasank. We are using the console debug messages to indicate different environments in our code. Since we migrate our scripts through many different environments, we test the URL for domain names and then trigger the appropriate UA code and metrics are recorded to the applicable GA site. It's working very well and we really appreciate your help on this.
DeleteI'm not sure if you are interested but if you have time, a great and logical next extension of this blog entry would be Google Tag Manager. I'd like to see if it is possible to utilize JavaScript review our Job Posting that a user is reviewing for key text such as job categories and then send Tag information back to our analytics account. This would provide an additional level of detail to our analytics where we could filter our analytics by job categories.
I imagine it would work similar to the basic Google Analytics approach where we would determine the domain name by reviewing URL attributes and then we would use JavaScript to test page contents for key words and when located, we would report back to google with the appropriate tag information.
Just some thoughts :D.
Thanks again for a wonderful blog.
Tom
Hi, can we not simply add the JS as html object in branding header?
ReplyDeleteHi Sasank,
ReplyDeleteI have implemented your code in our test environment and it is now capturing fluid pages as well, however, I am trying to capture which fluid homepage the user is visiting, either through a pageview or an event, but I am haven't got it to work yet. I am wondering if you or any of your followers have done something different to achieve that?
Thanks for this great post.
Ti
GA will track every HTTP requests.
DeleteThe way the Homepage dropdown works is purely javascript (which is running on the client side). Basically, display the appropriate tiles for that Homepage. So, it does not generate a HTTP request (server trip).
You could find the javascript code behind the Homepage dropdown list and write some code to send information to GA.
For example:
http://pi029.hcm92.edu:8000/psc/ps/EMPLOYEE/HRMS/c/NUI_FRAMEWORK.PT_LANDINGPAGE.GBL?HP=HC_HR_MGR_SELF_SERVICE_FLU_GBL
Notice the HP parameter with the value pointing to the CREF representing the Homepage.
This is just an idea that you could try.
Hi Sasank.
ReplyDeleteIs it possible to pass page parameters within the call to the GTM?
I'd like to pass custom variables (page data elements) so that I can derive some metrics based on the current transaction.
Thanks in advance
Tom
I should clarify my question some.
DeleteI'm using the approach shown above but since I'm in HTML Object and I'm using the %Include from within PT_COMMON. I'm trying to see how I can pass %bind(:1), etc. or grab other buffered data elements to pass as parameters. If I read correctly within the GTM help documents, I can pass 1 or more parameters within the dataLayer || [] like the following;
window.dataLayer = window.dataLayer || [{'ApplicantID':'50000001'}];
The challenge is obtaining the actual ApplicantID in this case.
Thanks.
Tom
Hi Tom - I have not tried this before. I see someone below also tried something similar with a code example but apparently there are some caching issues. I have not looked into this but will let you know if I have any ideas. Sorry for the delayed response.
DeleteCheck out the following comment below:
https://pe0ples0ft.blogspot.com/2018/05/peopletools-google-analytics-gtag-js.html#c9198669367862592050
Hi Sasank,
ReplyDeleteThanks so much for your blog. It is of a great help for us. Keep up the good work!!
Wondering if you have any code to send User ID to GA. We are trying to send USER ID to GA
I'm trying to use the attached script (using %userid to send) but looks like it is getting cached or something like and send only once in a while not for every user. Any info greatly appreciated.
function loadScript(url, callback){
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("https://www.googletagmanager.com/gtm.js?id=GTM-ABCDEFG", function(){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event': 'user-id', 'user-id': '%userid'});
window.dataLayer.push({'gtm.start':new Date().getTime(),event:'gtm.js'});
});
Hello, thank you for your effort.
ReplyDeleteI did not try this before but can we copy this function and paste it additional javascript tab in branding objects?
Thank you in advance.
If you are referring to CS_ANALYTICS_JS, then yes. That should work as well!
DeleteHi Sasank,
ReplyDeleteI'm trying to apply this but when I add the call to the HTML object with the js to PT_COMMMON, my Nav Bar moves from the right side of the page to the left side of the page and sometimes the application becomes inoperable. I'm on HCM 9.2.31/8.57.20. Any insight is appreciated.