Adding Google Tag Manager to the Scrivito Example App

The Scrivito Example App already integrates Google Analytics, which can be activated by simply adding your Google Analytics ID to the site settings on your homepage. However, for those who prefer Google Tag Manager (GTM): It is simple to add! In this tutorial, we will show you how.

To begin, you should have a Google Analytics account set up and a Google Tag Manager workspace created. Once set up, you will be given a script and asked to embed it’s code into your website. For GTM, once your workspace is set up, it asks you to add two scripts to every page of your website. The code of the first one wants to be pasted as high in the <head> of the page as possible.

Managing tracking and adding Google’s code

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.

/tracking.js 
...
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> from GTM 

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 <NOSCRIPT> INSTRUCTIONS FOR NON-GDPR SITES

GTM wants us to “paste this code immediately after the opening <body> tag”. The GTM <noscript> provides tracking data without requiring JavaScript. As it is a <noscript> and not a <script>, you should put it directly underneath the opening <body> tag in the “public/catch_all_index.html” file:

public/catch_all_index.html 
<!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 AG (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.

Content Security Policy

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:

src/public/_headerCsp.json 
"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.

Cookie Consent

Cookie consent component settings

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.

That's a wrap

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!