GTM

What will you learn?

Integrate Google Tag Manager with your website deco.cx, allowing the addition of tags configured by the GTM interface.
Integrate Google Analytics through GTM.

Prerequisites

A trackingId from a Google Tag Manager container, formatted in the style: GTM - XXXXXX.(help)
Optional: Google Analytics 4 configured tag (help)

Introduction

Google Tag Manager (GTM) is a free tool offered by Google that allows you to easily manage and implement tracking tags and third parties on your website or application. These tags can include analytics scripts data such as Google Analytics, advertising conversion pixels or other custom codes. However, excessive use of tags in GTM can degrade the performance of a site as scripts can increase the loading time of pages and compromise the user experience. Therefore, the integration by deco.cx uses Partytown, which allows you to execution of the tags in a service worker and improves the load time of the page.

Integrating GTM in deco.cx

If you have created a website on deco.cx based on our ecommerce starter, it already has all the necessary code to integrate with GTM. However, you need to configure a section block called Analytics by adding the trackingId property with the ID of the container previously configured.

For that, follow the steps:

Open the Blocks page in the deco.cx Admin.
Select Sections.
Search for Analytics.
Edit the Analytics section by adding or editing the Tracking ID property with the ID of your container in GTM.
Save and Publish the block.

All pages that use this section (Analytics) will be automatically updated.

And that! To test that everything is working, do the following:

Go to your deco site https://<<sitename>>.deco.site.
Go to the developer tools and access the Network tab.
Reload the page and make sure the script https://www.googletagmanager.com/gtm.js?id={GTM-ID} is being loaded.

Integrating Google Analytics 4

We recommend using Google Analytics as the GTM tag to avoid interference. If you are using Google Analytics with GTag, add your GA measurement id to the GA measurement ids property of the analytics section.

If there is already a Google Analytics 4 (GA4) tag in the GTM container configured, your deco.cx site will automatically be sending events to the GA4. To verify this, go to the Network tab again and look for a request with the name collect. Example:

Example collect request sending data to GA4 Example of collect request that sends data to GA4

If you don't see this request, make sure there is no adblock configured (ex: uBlock Origin). Some browsers already integrate adblocks by default.

However, if you want to analyze your metrics according to tests A/B created in deco.cx, it is necessary to make an extra configuration in the container GTM. For that, follow the steps:

In GTM, enter the Variables section.
Under User Variables, click Create New.
Fill in the variable name with Flags (this name will be used posteriorly).
Click the edit button to select the variable type and select Custom Javascript.
Paste the following code into the text area:

function main() {
  return window.LIVE.flags.map(function (flag) {
    if (flag.value) return flag.name;
    else return null;
  }).filter(Boolean);
}

Click Save.

After the variable has been created, it is still necessary to associate it with the Google tag Analytics. For that, follow the steps:

From the Tags menu, select your GA4 tag. (By default, Google Analytics GA4).
Under Tag Configuration, click the edit button.
In the User Property section, click Add Row.
Fill the Property name with flags and the Value with {{Flags}}, this being the same name as the variable created earlier.
That's it, the integration is set up!

Screenshot of `flags` property configuration Screenshot of flags property configuration

It is now possible to segment your views according to groups of user configured in deco.cx.

Troubleshooting

A tag I configured is not working properly

By using Web Workers technology to include external scripts, there are some limitations related to CORS (Cross-origin resource sharing). Depending on the tag being included, it is possible that the request for fetch a .js script fails.

To solve this problem, you need to create a requests proxy in your store (read more about this solution here). Like deco.cx websites are traditional Fresh projects, just follow the following steps to create this proxy:

In your project, inside the routes/ folder, create a file called proxy.ts.
Paste the following code into this file, noting the comments:

import { Handlers } from "$fresh/server.ts";

// Add here the scripts you want to proxy
const ALLOWLIST_URLS = ["https://xxxx.collect.igodigital.com/collect.js"];

export const handler: Handlers = {
  GET: async (req) => {
    const url = (new URL(req.url)).searchParams.get("url");

    if (!url || !ALLOWLIST_URLS.includes(url)) {
      return new Response(null, { status: 404 });
    }

    const proxyRequest = new Request(
      url,
      {
        headers: req.headers,
        method: req.method,
        body: req.body,
        redirect: "follow",
      },
    );

    const response = await fetch(proxyRequest);
    const headers = new Headers(response.headers);
    headers.set("access-control-allow-origin", "*");

    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers,
    });
  },
};

Push your code changes to the main branch.
Replace the URLs of the added scripts in the GTM settings with https://www.yourdecostore.com.br/proxy?url={urlDoScript}.