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 audience group. We need to configure an Advanced Audience for this experience. 

Select Audience:

Then select "Create an advanced goal" and under Page Tags, select JS condition:

Enter the following JS code:

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

// Best to declare the following function in Project Global JS
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));
};

Then, the experience will only run for those visitors whose industry value of the Data Layer equals medical.

A similar type of targeting can be achieved if the dataLayer holds page data. Then, the JS Condition would be placed on the experience Location instead.