[Answered] Google Analytics in website using Valence 5.x

[Maria]

We would like use Google Analytics in one of our websites that use Valence. We will need to add the Google Analytics code in the header tags in every page of the site. For dynamic content, it suggests that we use a common include or template to paste the tracking code instead of manually adding it to every page.

To pass our website data to Google Analytics, I will need to add the google analytics tracking code to every page. GA assigns a tracking ID for the website. I’ve pasted below the info GA has on how to put the tracking code onto the website:

For example: the tracking ID is UA-54516992-1.

Website tracking
This is the Universal Analytics tracking code for this property.
To get all the benefits of Universal Analytics for this property, copy and paste this code into every webpage you want to track.

 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 

  ga('create', 'UA-54516992-1', 'auto');
  ga('send', 'pageview'); 

PHP Implementation
Use the code above to create a file named "analyticstracking.php", and include the file on each PHP template page.
Add the following line to each template page immediately after the opening <body> tag:

<?php include_once("analyticstracking.php") ?>

Dynamic Content Implementation
Use a common include or template to paste the code above instead of manually adding it to every page.


Any suggestions? Should I use the Hook.js – maybe put code in beforelogin, beforelogout, launchapp, close app, etc events? Where would I include this in the actual home/landing/login page?

Thanks,
Maria

[sean.lanktree]

You can use the Hook.js file for this (located in your Valence directory under resources/desktop). I would suggest creating an external js file with your code for incorporating Google Analytics. For example sake, I will refer to it as "ga.js" and place it directly in the "resources" folder under Valence.

Look for the "launchapp" event in the Hook.js and place the following code:

setTimeout(function(){
    var ga = document.createElement('script');
    ga.setAttribute('src','/resources/ga.js');
    app.getDoc().head.appendChild(ga);
},500);

Wrapping this in a timeout because the event fires a bit too early thus causing the append to be unsuccessful from time to time (we will fix this in an upcoming release).

[Maria]

Hi Sean,

Thanks. I added the code as you instructed above. This is how I did it

launchapp : function (app) {
setTimeout(function(){
var ga = document.createElement('script');
ga.setAttribute('src','/resources/googleanalyticstracking.js');
app.getDoc().head.appendChild(ga);
},500);
},

Does this look right? It does not seem to work or load my googleanalyticstracking.js when I look at Chrome Dev Tools.
Nothing is registering in Google Analytics.

The website is https://connectdev.valvoline.com.au
I was expecting to see my js load in dev tools when I bring up the website in Chrome but I don't see it even after the 500ms delay.
I guess you could try it too(?)

Please help.

Thanks,
Maria

[sean.lanktree]

Hi Maria - the code I posted should add the Google Analytics for each application that is launched within the portal. If you want to add the analytics to the Portal itself, then I would try adding the same code (that was added to the launchapp event) to the "constructor" of the Hook. So maybe immediately after the variable definitions within the constructor of the Hook.

[Maria]

Thanks Sean. Yes, I can see data going to analytics as I launch an app.
I will try adding it to the constructor as you've advised and see what happens.

Question: I assume this works only on the desktop portal, right? How can I add the google analytics to the native portal so we can track the activity from there too?

Thanks again.

[Johnny Major]

For the native portal you will need to add the google analytics to your app's index.html