Set Up Google Tag Manager and Google Analytics

This guide will walk you through the process of integrating Limio Analytics with Google Tag Manager (GTM) and Google Analytics (GA). This setup will allow you to capture and analyse Limio events in your Google Analytics dashboard

Prerequisites

• A Google Tag Manager account

• A Google Analytics account

• Access to your Limio account and settings

Event Flow Outline

Step 1: Initial Setup

1. Ensure you have active Google Tag Manager (GTM) and Google Analytics (GA) accounts.

2. In your Google Tag Manager account, locate and copy the GTM setup code.

Note: you will just need to copy the section of the GTM installation script. That should look something like:

(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\_CONTAINER\_ID');

3. Navigate to the Analytics section in the General Settings of your Limio account.

4. In the Inject Document section, paste the GTM setup code you copied.

5. Copy the standard Limio code from the "Capturing Events within the Data Layer" section. You can find this at:

<script>
  limio.dataLayer.subscribe(cb)  
  //where the callback function had the following signature 
  
  function cb(event) {
   if (typeof dataLayer === 'object' && Array.isArray(dataLayer)) {
    dataLayer.push(event) 
   } 
 }
</script>

6. Paste the Limio code into the Inject Document section, directly below the GTM code you added earlier.

Screenshot 2024-07-01 at 12.04.04.png

7. Save your changes.

8. Rebuild and republish any relevant pages where you want to capture Limio events.

Note: Limio can also provide a template container file which can be imported into your environment to configure basic tags, events and variables which map Limio datalayer events to Google Analytics 4 events. Please contact if you wish to use this.

Step 2: Setting Up a Custom Event in GTM

We'll use the "add_to_cart" event as an example.

1. In your GTM workspace, go to the Triggers section.

2. Click on "New" to create a new trigger.

3. Configure the trigger as follows:

• Trigger Type: Custom Event

• Event name: add_to_cart

• This trigger fires on: Some Custom Events

• Fire on: Event contains / equals "add_to_cart"

Screenshot 2024-07-01 at 12.07.57.png

4. Save the trigger.

Step 3: Creating a New Tag in GTM

1. In your GTM workspace, go to the Tags section.

2. Click on "New" to create a new tag.

3. Configure the tag as follows:

• Tag Type: Google Analytics: GA4 Event

• Configuration Tag: Select your GA4 Configuration tag (create one if it doesn't exist)

• Event Name: add_to_cart

• Event Parameters: Add relevant parameters (see next step)

4. Add Event Parameters:

• Follow the

• Reference values sent by the Limio datalayer event

• Example for currency:

  • Parameter Name: currency

  • Value: {{DLV - currency}} - this can be a custom variable that you configure in the Variables section

Screenshot 2024-07-01 at 12.13.10.png

5. For more complex parameters, you may need to create custom JavaScript variables. Here are some code examples you can use a basis:

• Creating an items array:

function () {
  try {
    var products = google_tag_manager[{{Container ID}}].dataLayer.get("items");
    var itemsOutput = [];

    for (var i = 0; i < products.length; i++) {
      var item = products[i];
      var itemOutput = {
        item_name: item.offer_name,
        item_id: item.products[0].sku,
        item_variant: item.term,
        price: item.price,
        quantity: item.quantity
      };
      itemsOutput.push(itemOutput);
    }

    return itemsOutput;
  } catch (e) {
    return undefined;
  }
}

• Calculating a value based on items in the basket:

function () {
  try {
    var items = google_tag_manager[{{Container ID}}].dataLayer.get("items");
    var value = 0;

    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      value += item.price;
    }

    return value;
  } catch (e) {
    return undefined;
  }
}

These can be used by creating a variable in the Variables tag, selecting a type of Custom JavaScript and then pasting in your code.

Screenshot 2024-07-01 at 12.14.21.png

The variable can then be referenced in the Event Parameters section:

6. Set the trigger for this tag to the custom "add_to_cart" trigger you created earlier.

7. Save the tag.

Step 4: Publishing and Testing

1. Save all changes in your GTM workspace.

2. Click "Submit" to publish your changes.

3. To test your event, you can use the following tools:

• GTM Preview Mode

4. Trigger the "add_to_cart" event on your website and verify that:

• The tag is triggered in GTM

Screenshot 2024-07-01 at 12.18.26.png

• The event data is correctly sent to GA4

Screenshot 2024-07-01 at 12.19.07.png

Additional Notes

• You may need to add a generic GA4 tag that fires on the standard "Initialization - All Pages" trigger in your GTM container.

Screenshot 2024-07-01 at 12.15.43.png

• Always test thoroughly to ensure all events are being captured and sent correctly.

• Consider setting up additional Limio events following a similar process.

By following this guide, you should now have a basic setup for capturing Limio Analytics events in Google Analytics via Google Tag Manager. Remember to adjust and expand this setup based on your specific needs and the particular events you want to track.