Using Google Tag Manager, you can define and manage various pieces of JavaScript tracking code (so-called tags) for your website. Google Analytics tracking code is one of them. You can flexibly change your tracking without having to deploy the website each time.
As opposed to Google Analytics, Google Tag Manager is not an analytics tool that generates reports but is used to have data sent from a website to other marketing and analytics tools, including Google Analytics.
The Scrivito Example App already includes Google Analytics. However, for those who prefer Google Tag Manager (GTM), we will show here how to integrate it.
To begin, you should have a Google Analytics account set up and a Google Tag Manager workspace created. Once set up, it asks you to add two scripts to every page of your website. The code of the first one needs to be pasted as high in the <head> of the page as possible, the second one immediately after the opening <body> tag.
With GDPR in full effect, the Scrivito Example App blocks tracking cookies by default. To support you with keeping your app fully compliant, the Scrivito Example App includes the “/tracking.js” file for managing your tracking scripts efficiently and load them appropriately. This file is called once the cookie consent has been given and then adds the tracking scripts. Since we are working with a single-page application, we only need to add it once since each page is rendered from the same source.
The code we will add to “/tracking.js” creates a script tag and then adds the GTM function to the <head> as specified by the GTM installation instructions. Though this code should be the same for everyone, with the exception of the “GTM-ID”, you should verify the part starting with “function” and ending with your GTM-ID.
...
const gtmScript = document.createElement("script");
gtmScript.textContent = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-**_YOUR_GTM_ID_**');`;
document.head.appendChild(gtmScript);The <noscript> tags in the GTM installation instructions are intended to cover the case that a website visitor has JavaScript turned off. Due to GDPR, a user is unable to provide explicit consent without JavaScript and thus this step should be skipped. In case GDPR does not apply to you our your website visitors, the instructions are below.
GTM wants us to “paste this code immediately after the opening <body> tag”. The GTM <noscript> provides tracking data without requiring JavaScript and should therefore be inserted directly underneath the opening <body> tag in the “public/catch_all_index.html” file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content="Scrivito by Infopark Group (scrivito.com)" />
<title>Your Scrivito powered site is loading ...</title>
<link rel="preconnect" href="https://api.scrivito.com" crossorigin />
<link rel="preconnect" href="https://api.scrivito.com" />
<link rel="preconnect" href="https://cdn0.scrvt.com" />
<link rel="stylesheet" href="/index.css" />
<script src="/js_snippets_head.js"></script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-##_YOUR_GTM_ID_##"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="application">
<span class="loader">
Your <a href="https://www.scrivito.com">Scrivito</a> powered site is
loading ...
</span>
</div>
<script src="/index.js"></script>
<script src="/js_snippets_before_body_end.js"></script>
</body>
</html>If you are using prerendering, the snippet needs to be added to “src/prerenderContent/generateHtml.js” as well.
A Content Security Policy lets you restrict and allow interactions between your web application and services outside your website’s domain. The interaction options you should grant GTM via your CSP depend on what you use the GTM for; Google has a guide about how to Use Google Tag Manager with a Content Security Policy that lets you know what is needed based on your usage.
You may need to add unsafe-inline to the script-src in the “_headerCsp.json” file. It is not recommended but required by GTM as shown in the linked article. A typically updated CSP will look like this:
"style-src": [
"'self'",
"https://assets.scrivito.com/",
"https://*.cloudfront.net/",
"https://tagmanager.google.com/",
"https://fonts.googleapis.com",
"'unsafe-inline'"
],
"script-src": [
"'self'",
"https://tagmanager.google.com/",
"https://www.googletagmanager.com/",
"https://*.cloudfront.net/",
"https://api.scrivito.com",
"https://app.intercom.io",
"https://assets.scrivito.com",
"https://js.intercomcdn.com",
"https://widget.intercom.io",
"https://www.google-analytics.com"
],
"object-src": "'none'",
"block-all-mixed-content": true
}With this all set up, you will have GTM available on each page of your Scrivito-based website.
As stated above, the Scrivito Example App blocks all cookies by default. In order to get GTM working, you will also need to enable the built-in cookie consent component. For this, just add a URL to your privacy policy in the “Cookie consent link” attribute in the site settings of your homepage (which can be found in its page properties). With this enabled, and acceptance of cookies by your visitors, tracking data is allowed.
If you have taken steps to prevent your website from being accessed by visitors in the EU or other locals with requirements, removing the component from “src/Components” and not importing it in “src/App.js” is sufficient.
With a few additions and an understanding of how the Example App works, you will have GTM up and running in no time. Of course, if you have built your own Scrivito-based app, instructions will vary. As always, if you have any questions, please let us know!