Google Analytics

Liberty Create - Build Advice
1

Please can anyone advise how to include google analytics on a Liberty Create application.

The of the page can’t be directly edited, so I have modified the theme pack to inject the JavaScript after page load, which Google advises is possible.

This adds the JavaScript. I needed to add some firewall rules to allow the external URLs for the “webpages” where I was including the code.

I overcame all these errors but the webpages are still not tracking in Analytics.
I can see in the browser console “Third-party cookie will be blocked.” which may be related.

Does anyone have a working example of including analytics through the theme pack?

2

Hi, we have a code snippet on every page we want to collect data on (we don’t put it in the header). The reason for this is that we want to be able to disable it via a subset for those users who don’t consent to us collecting tracking data. Happy to give a quick demo of how we put it together if needed.

We had to add a few exceptions to the firewall too, I wonder if that is the issue you are facing. By inspecting the browser console you can catch the blocked URLs and add them to the exception list

3

Hi, we’ve got Google Tag Manager working through the theme pack. I think we use GTM to deploy the Google Analytics tag (I’m not a GTM/GA expert…). However it works, we get the GA info coming in from our LC apps.

I used Google Tag Manager in Liberty Create - #2 by ali.bandali and https://community.netcall.com/library/highlighting-integration-with-the-gov-metric-survey-reporting-tool/ to set it up.

From what I remember, I added the GTM code to the theme header and footer, then added a bunch of stuff to the firewall rules.

It was quite a lot of trial and error to get the URLs and what they’re allowed to use (Ajax, JS, etc).

Happy to send you the full details of the firewall setup if you want.

4

Thank you both your replies on this.
I’ve been able to implement this now, adding the Google Tag Manager code to the start of the <script> tag in the footer.vue file, to add to the <head> of the page after page load.

If it’s useful to anyone else:


<script>
	(function () {
		const head = document.getElementsByTagName("head")[0];
		var gaScript = document.createElement('script');
		gaScript.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX');
		document.head.appendChild(gaScript);

	})();

	window.dataLayer = window.dataLayer || [];
	function gtag() { dataLayer.push(arguments); }
	gtag('js', new Date());

	gtag('config', 'G-XXXXXXXX');

      // additional JS code here for vue.js
</script>
1 Like