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 theGA 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 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
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 proxying requests 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 calledproxy.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}
.
For example, if the script you are trying to load is in
https://xxxx.collect.igodigital.com/collect.js
, replace this URL with
https://www.yourdecostore.com.br/proxy?url=https%3A%2F%2Fxxxx.collect.igodigital.com%2Fcollect.js
.
Use the encodeURIComponent
Javascript function if necessary.