Skip to content

Simple setup with Google Analytics 4

Jump to bottom
Osvaldo edited this page Feb 1, 2023 · 4 revisions

This is the simplest setup to be able to do experiments with Abrantes in your website. You can add it to all pages of your website but, if you can't or don't want to, it should be at least in any page where:

  • The user enters the experiment
  • There's changes that are part of the experiment
  • Where you want to measure anything related to the experiment

Your Google Analytics 4 ID

First get your Google Analytics 4 ID. Should be something like for example G-XXXXXXXXXX. You can obtain this ID in Admin > Property > Data streams > Your website data stream > Measurement ID

In the <head>

First add a link to AbrantesPlus.js or even better to a minified version of it AbrantesPlus.min.js

<script src="AbrantesPlus.min.js"></script>

This script must also be in the <head>. Replace [ANALYTICS_ID] bellow by your Google Analytics 4 ID.

<script async src="https://www.googletagmanager.com/gtag/js?id=[ANALYTICS_ID]"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    // Add the params here instead of in gtag config
    window.gtagParams = {

    };
</script>

Please note that the usual gtag config it's not there, it will go near the closing </body tag. However if you use params in the gtag config they should go here instead.

Just before the </body> tag

Add the script bellow just before the closing body tag in your html. Replace [ANALYTICS_ID] by your Google Analytics 4 ID.

<script>
    gtag('config', '[ANALYTICS_ID]', window.gtagParams);
</script>

If you use config parameters in your gtag config they should go in the head section as described above.

Note: If you need to insert the gtag config script in a JavaScript file instead of in the html that's fine. It works as well as long as the script is called just before the </body>tag. You may need this if you use Google Consent Mode and cookie management or if you use other custom dimensions that are dynamically calculated.

Conclusion

Adding Abrantes to your entire website should be quite straightforward, specially if you already use Google Analytics 4 and do the web analytics tracking with gtag.

Clone this wiki locally