Wednesday, September 14, 2016

PeopleTools - Using Google Analytics (analytics.js)

In one of my branding posts, I described how we could inject the Google Analytics javascript (ga.js) code snippet using the Branding Framework.

As most of you know, the latest version of Google Analytics library is analytics.js.
https://developers.google.com/analytics/devguides/collection/upgrade/reference/gajs-analyticsjs

To start using analytics.js, all we have to do is update our custom Google Analytics injection code.

Here are the steps to migrate/implement analytics.js.

Development Environment: HCM 9.2 PUM Image 17 - PeopleTools 8.55.03

Create a custom javascript object with analytics.js code snippet:

Make sure you substitute your property id on line 6.


Inject custom javascript object to the application globally:

In my case, I am using a custom Global JS Injection Framework that I described previously (refer: post 1 and post 2). You are free to use other options that might work best for you.

At a high level, PT_UTIL ---includes--- CSK_FL_BOOTSTRAP_JS ---includes--- CSK_INJECT_JS. CSK_INJECT_JS is where we can list all the javascript objects that we want to load (globally or targeting specific conditions).

Here are jsfiddle links to the versions of CSK_FL_BOOTSTRAP_JS and CSK_INJECT_JS at the time of writing.

Results:


18 comments:

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi Ravi,

      You don't need to add the entire login URL as the "Default URL" in the Property Settings.

      Just enter the hostname. E.g.; http://test_12.ssc.web.com:8000

      Thanks!

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Hi Ravi You see the real time data as well. Under the Reporting Tab, the real time data should be under Real Time > Overview. If you want historical data, then you can find it under Audience > Overview.

      Here is the screenshot: https://snag.gy/pPogT2.jpg

      Delete
    4. Hi Sasank,

      Can I know what is the use of Javascript Injects when we see the reports directly in Google Analytics. Could you pls mind explaining that?

      And also, is there any way we see these graphs (Real Time/ Historical Graphs) in PeopleSoft itself?

      Delete
    5. I don't think I follow your first question. Are you asking why we have to inject javascript? Because that is how we can send usage metrics to Google.

      Once we have the javascript code in PeopleSoft, we can then login to Google Analytics and view the reports there. I am not sure if there is a way to view Google Analytics Graphs in PeopleSoft. If there is an API, then may be we could write something in PeopleSoft to display that information.

      Delete
    6. Yeah, even without the inject of Javascript in PS, just by giving the web address in 'View settings' in GA, I can see the changes in graphs. So, I didn't understand the use of JS in PS again.

      Delete
    7. Without the JS in PeopleSoft, I don't think it will work. I am not sure how you got it working. I will be very surprised if that is how it is working.

      There needs to be code in PeopleSoft that will send the usage metrics to GA.

      Delete
  2. Hi Sasank,

    I am currently using 9.1 with PT 8.55.

    I created a JavaScript Object with the analytics.js code and added the JavaScript object in the component branding HRS_CE.

    Google Analytics returns this string:
    /psc/ps/employee/hrms/c/hrs_hram.hrs_ce.gbl?siteid=1&folderpath=portal_root_object.hc_hrs_ce_gbl2&isfolder=false&ignoreparamtempl=folderpath,isfolder&portalactualurl=https://example.com/psc/ps/employee/hrms/c/hrs_hram.hrs_ce.gbl?siteid=1&portalcontenturl=https://example.com/psc/ps/employee/hrms/c/hrs_hram.hrs_ce.gbl?siteid=1&portalcontentprovider=hrms&portalcreflabel=careers&portalregistryname=employee&portalservleturi=https://example.com/psp/ps/&portaluri=https://example.com/psc/ps/&portalhostnode=hrms&nocrumbs=yes&portalkeystruct=yes

    Before I upgraded to 8.55 from 8.53, it would return the correct value:
    /psp/ps/employee/hrms/c/hrs_hram.hrs_ce.gbl?siteid=1&folderpath=portal_root_object.hc_hrs_ce_gbl2&isfolder=false&ignoreparamtempl=folderpath,isfolder

    In 8.53, I added the GA code in PT_COMMON.

    The PageViews used to be 2x more before I upgraded. Any thoughts on why the URL displays this long string and why the Pageviews count is not accurate?

    Thanks!

    ReplyDelete
    Replies
    1. I don't think the location of the GA code (whether you use Component Branding or PT_COMMON) would be causing the additional parameters.

      How are you accessing/navigating to the component? And when you access the component, are you seeing the URL as reported by GA? If so, it is not really a problem with GA because it usually records whatever URL we access.

      You may want to check what you see on GA when you directly access the following URL:
      https://example.com/psc/ps/employee/hrms/c/hrs_hram.hrs_ce.gbl?siteid=1

      I am guessing that there is something in the way you are navigating to this component that might be adding the additional parameters.

      Delete
  3. Sasank Vemana,

    I have been trying to implement Google Analytics on a peoplesoft page to track the clicks and followed all the steps written in your blog. I only got the results once and later it never pulls the Real- Time users and Audience of the website. Any help in this regards will be appreciated.

    Thanks

    ReplyDelete
    Replies
    1. I tried by just entering the hostname by it did not work out.

      http://test200040.web.org:8000

      Thanks

      Delete
    2. I have not seen this issue before. You may want to check if the google analytics code is getting triggered for each request. If not, that may be your problem.

      You can add console.log messages in your javascript code and watch the console. You could also look in the browser > developer tools > network tab to see if the google analytics script is showing up there.

      Delete
    3. Browser >> developer tools >> console option helped me figure out the issue. This is working great now. Thanks for your help Sasank Verma.

      Delete
    4. Glad to hear that. What was your problem and how did you resolve it?

      Delete
  4. Hi, I wonder if using PeopleSoft's Branding System Option will do a trick? I mean if I create a custom JS object with the code from google analytics, and select it in the branding system options, should it not work? Isn't it same as injecting that javascript globally?

    ReplyDelete
    Replies
    1. @Khantozavri - Yes. We can use the Branding System Options for this requirement. But the Branding System Options page will only inject the javascripts listed in Classic pages. So, that approach will work if you are only using Classic and have NOT implemented Fluid.

      If you are/will be using both Classic and Fluid, then you will need to find a way to inject the GA javascript on all pages (not just on Classic). Here is one approach that i have used:
      https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html

      Delete
  5. Tha is for the response. We only use classic so that shouldnt be an issue. However the JS injection does not work for some reason. I have created the JS object, inserted it into system options but GA won't show anything. I then inserted JS in header/dooter of the theme - same no result. After which I have created HTML object instead and jnserted it into header/footer and GA started to show stats.

    We are on FSCM 9.1 /PT 58.54.18

    ReplyDelete