Skip to main content

Data Layer

The Data Layer is a JavaScript object used by Google Tag Manager (GTM) to pass information from your website to GTM tags. It allows for dynamic data (such as user properties or event details) to be captured and utilized in the Nudge SDK, ensuring more flexible and personalized tracking.

In this guide, you’ll learn how to set up the Data Layer, create variables in GTM, and use them with the Nudge SDK.

What is the Data Layer?​

The Data Layer is a shared object that stores information about the user, events, or other contextual details of your website. GTM listens for changes in the Data Layer and reacts accordingly, allowing you to capture dynamic information and use it in your tags.

Step 1 : Setting up Variables in GTM​

Variables in GTM are used to extract data from the Data Layer and pass it to the Nudge SDK. Here's how to set them up:

  1. Navigate to Variables:
  2. Click New to create a new variable.
  3. Select Variable Configuration > Data Layer Variable.
  4. Enter the name of the key from the Data Layer that you want to extract. For example, userId, email, or userProperties.age.
  5. Create separate variables for each piece of data you want to extract (e.g., userId, email, age, gender). Here’s an example of a variable configuration for userId:
  • Variable Name: DLV_USERID
  • Data Layer Variable Name: userId

Step 2 : Using the Data Layer Variables in Nudge SDK​

Once your Data Layer variables are set up, you can use them in your Nudge SDK tags to dynamically pass user and event data.

Sending user properties using Data Layer​

<script>
  (function() {
    if (window.nudge) {
      window.nudge.userIdentifier({
        event : "userData"
        externalId: "{{DLV_USERID}}",
        email: "{{DLV_EMAIL}}",
        properties: {
          age: "{{DLV_AGE}}",
          gender: "{{DLV_GENDER}}",
          country: "{{DLV_COUNTRY}}"
        }
      });
    }
  })();
</script>

Sending event properties using data layer​

<script>
  (function() {
    if (window.nudge) {
      window.nudge.track({
        event: 'purchase',
        properties: {
          product: "{{DLV_PRODUCT}}",
          quantity: "{{DLV_QUANTITY}}",
          countryOfExport: "{{DLV_COUNTRYOFEXPORT}}"
        }
      });
    }
  })();
</script>

Warning
Event name, event properties, and user properties all follow this regex:^[a-z][a-z0-9_]{2, 99}$
  • Only small alphabets, numbers, and underscores (_) are allowed.
  • Spaces are not allowed in event names.
  • Name cannot start with a number; it needs to start with an alphabet.
  • The name should be between 2 and 99 characters in length.
  • If any capital letter is sent, it will be converted to lowercase.

Step 3 : Pushing Data to the Data Layer​

To send user or event-specific data to GTM, you need to push this information to the Data Layer dynamically when the event happens on your website.

Here’s an example of how to push a purchase event to the Data Layer:

window.dataLayer.push({
  event: 'purchaseEvent',
  product: 'Fortune Cookies',
  quantity: 5,
  countryOfExport: 'US'
});

Triggering Tags Based on Data Layer Events​

You can create triggers in GTM to fire tags when specific Data Layer events occur. For example, you can set a trigger to fire when the purchaseEvent occurs:

  1. Go to Triggers in GTM and create a new trigger.
  2. Choose Custom Event as the trigger type.
  3. Set the Event Name to match the event in your Data Layer (purchaseEvent in this case).
  4. Link this trigger to your Nudge SDK event tracking tag.