PeopleTools - Using Google Analytics (gtag.js)

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:

Staying within the Activity Guide/Nav Collection Target Content Area | AJAXTransfer Parameter

I recently ran into an issue with transfer functions executing from within a Nav Collection (which uses Activity Guide framework). These transfer functions result in the loss of the Navigation panel (Side Page) which is basically exiting from the Nav Collection.

Demo of the problem

Navigation Collection Definition for reference

Tile Wizard for reference

Solution

The solution to this problem is to use the AJAXTransfer=y parameter in the Content Reference corresponding to the Navigation Collection Tile. The following PeopleBook reference is a must read for anyone who is working on Fluid configurations like Activity Guides, Nav Collections, Master Detail pages, etc.

Working with Two Panel Implementations

To fix the issue, I added &AJAXTransfer=y to the Tile Content Reference - Portal URL as follows:

Result

Fluid Branding - File Attachments Icon

Here is a question from PeopleSoft General Discussion community.

How can we customize the icons in the Fluid file attachment dialog box?

Further, how do we use different icons for different form factors?

We can do this by using CSS to override the icon on different form factors. I added the following styles at the end of my Fluid - Global Override Style Sheet used in my Branding Theme.

Fluid - Global Override Style Sheet

CSS referenced in Theme Definiton

CSS for Reference

As we can see in the CSS, we can use a different image as the content for the File Upload icon based on the form factor.

Demo on Desktop (Extra Large Form Factor)

Demo on Mobile Device (Small Form Factor)