Google Tag Manager

The convention within Xerius is to always use Google Tag Manager to inject the analytics scripts that start up Piwik Pro. This ensures that Marcom has full control over what is being tracked and doesn't need developer intervention to make changes. Piwik Pro is used for tracking behind the scenes and expects certain events to be pushed to Google Tag Manager. It will also take cookie consents into account for tracking.

Google Analytics 4 not GDPR compliant

As of 01/07/2023, Google has sunset the Universal Analytics (UA) platform. It needs to be replaced with GA4 (Google Analytics v4) which is not GDPR compliant for the following reasons:

• Data transfers to US servers: GA4 transfers personal data to Google's servers in the United States
• Lack of adequate data protection: The EU considers these transfers to violate GDPR requirements
• Insufficient legal basis: Google's data processing practices don't meet European privacy standards

For more information about the compliance issues check this article.

Because of this, Piwik Pro has been chosen as a replacement for Google Analytics.

Using in Vue 3

We recommend using the vue-gtm library. Make sure to check that you install the Vue 3.x version. Implementing GTM will be easier with this library, and it also allows integration with the Cookiebot implementation if needed.

Piwik does not expect the default page_view event, but a custom virtual_page_view event. This makes linking the GTM container with the Vue router to track page views automatically unnecessary. You will need to fire the events manually with virtual_page_view as the event name.

Install the package

npm install @gtm-support/vue-gtm

Configure

Firstly, we need to set up the GTM library, which can be done in the main.ts file. Here is an example configuration. We only need to add the GTM ID since we would like to have the script injected and enabled by default.

main.ts

import { createGtm } from "@gtm-support/vue-gtm";

app.use(
  createGtm({
    id: "GTM-XXXXXX",
    enabled: false, // disabled by default, enabled by cookiebot triggers
  })
);

cookiebot.ts

//...
function initialize(lang: string, toRoute: RouteLocationNormalized, titlePrefix: string) {
  if (!(window as any).Cookiebot) {
    setupCookiebot({
      cbid: import.meta.env.VITE_COOKIEBOT_ID, // Xerius domain group id
      language: lang,
      onMarketingAccept() {
        useGtm()?.enable();
      },
    });
  }
}

Fire Events

We can fire events when a button is clicked for example, or when the user navigates to another page.

const gtm = useGtm();

if (gtm.enabled()) {
  // check if gtm is enabled
  gtm.trackEvent({
    event: "virtual_page_view",
    vpp: "/<language_country>/opstart-eenmanszaak/<virtual_dom_state>/",
  });
}

More information can be found in the documentation of the GTM library.

Debugging

To enable debugging, set the debug parameter to true inside the provided options for the vue-gtm library.

This will log the events pushed in the console and enable debugging tools.

Vue.use(VueGtm, {
  id: "GTM-XXXXX",
  debug: true, // Whether or not display console logs debugs (optional, default = false)
});

Any events that are pushed will be pushed through the dataLayer. It's possible to look into this by using window.dataLayer in the console or code.

There is also an option to install a plugin in your Chromium-based browser to debug analytics trackers. We recommend using Analytics Debugger.

Inside the Google Tag Manager site, there is an option to preview the tags and triggers. This allows you to open your local or deployed application and see which tags are getting triggered.

Using Angular

We recommend using the angulartics2 library. This is the most popular choice and will be easy to set up. It's best to follow the installation instructions here. Virtual page views will be automatically tracked.

import { Angulartics2GoogleTagManager } from "angulartics2/gtm";

function initGoogleTagManager() {
  const containerId = GTM_CONTAINER_ID;
  const windowRef = window as any;
  const document = window.document;
  const dataLayer = 'dataLayer';
  windowRef[dataLayer] = windowRef[dataLayer] || [];
  windowRef[dataLayer].push({
    'gtm.start': new Date().getTime(),
    event: 'gtm.js'
  });
  const f = document.getElementsByTagName('script')[0];
  const j = document.createElement('script');
  j.async = true;
  j.src = `https://www.googletagmanager.com/gtm.js?id=${containerId}&gtm_auth=${GTM_AUTH}&gtm_preview=${GTM_ENV}`;
  if (f.parentNode) {
    f.parentNode.insertBefore(j, f);
  }
  const head = document.getElementsByTagName('head')[0];
  head.appendChild(f);
}

setupCookiebot({
  cbid: COOKIEBOT_CBID, // Xerius domain group id
  autoBlockingMode: false,
  onStatisticsAccept: () => {
    initGoogleTagManager();
    this.angulartics2GoogleTagManager.startTracking();
  },
});

Without Framework

When your application does not contain a frontend framework, please follow the guide here. To account for the usage of Cookiebot, we need to mark the GTM script with the attribute data-cookieconsent="ignore".

This will make sure that GTM is allowed to execute the script. Google Analytics will however still be blocked before the user accepts this category of cookies.