Targeting in Convert Using dataLayer Data

THIS ARTICLE WILL HELP YOU:

• Data Layer Definition
• Data Layer Structure
• Steps

Data Layer Definition

A Data Layer is a data structure that ideally holds all data that you want to process and pass from your website to other applications that you have linked to.

A very common example is web analytics tracking. You might have a Data Layer that feeds data about the visitor into your analytics tool. Often, this data isn’t available in the presentational layer or in the markup at all. This data might be, for example, details about the visitor (login status, user ID, geolocation), metadata about the page (optimal resolution, image copyrights), or even information that’s already in the markup but that you want to access in a more robust way.

Therefore, you can use this Data Layer to store session visitor data and present later a specific experience to a specific visitor group.

Data Layer Structure

A classic Data Layer would look like the following and would be embedded in your page:

dataLayer = [{
        isLoggedIn: 0,
        userEmail: 'any@test.com',
        industry: 'medical'
    }];

Let's assume that the industry field can have different values, and we want to target with our experience only users in the medical industry.

Steps

First, we need to create the experience that we want to show to this location group. We need to configure a Location Trigger of type Callback for this experience.

Select Location:

Then click "New Location" and switch to the  Advanced tab, then under Triggers choose "When a callback is called"

Enter the following JS code under "Callback JavaScript"

// Location Callback JS
if (options.isActive) return;
window.waitForDataLayer('industry', 'medical').then((element) => {
  if (element) {
    activate();
  }
});

Finally, got to the project configuration, and enter the following JS code under "Global javaScript"

window.waitForDataLayer = (key, value,
  {
    nextRetry = 100, // ms
    maxRetries = 50,
  } = {}
) => {
  let retries = 0;
  const check = (resolve) => {
    const result = window?.dataLayer?.find((layer) => layer[key] === value);
    if (result) {
      resolve(result);
    } else if (retries < maxRetries) {
      retries++;
      setTimeout(() => check(resolve), nextRetry);
    } else {
      resolve();
    }
  };
  return new Promise((resolve) => check(resolve));
};

Make sure that the option "Use Legacy Script" is turned OFF under "Environments & Tracking Code" as well.