Data Layer variables in Project ad slots

In this example, you will learn how to change ads inside Riddle with Data Layer. This is useful if you want to personalize the ad experiance for your customers.

Step 1

Go to Publish settings "Data Layer" and add a Data Layer Item "ad-manager"

Step 2

Go to "Your projects" -> Select your project and go to "Ad Slots". Use one of the ad slots and insert the code you an find below in the "AdServer Tag / Code" field. (Complete project ad slot code)

Step 3

Go to your Riddle -> Settings -> "Monetization: Display ads" and select the ad slot you have added the code to.

Step 4

You can use this Variable to send data to your ad iframe. We are using "ad-manager-1", "ad-manager-2" and "default" as values.

Function to evaluate the ad manager value and insert the ad accordingly

function riddleDataLayerListener(event) {
  if (!event.data.isRiddleDataLayerEvent) {
    return;
  }

  var adMangager = event.data.riddleDataLayer.find(
    (f) => f.key === "ad-manager"
  );
  
  const adManagerValue = adMangager.value; // ad-manager-1, ad-manager-2, default

  if (adManagerValue === "ad-manager-1") {
    // code for ad manager 1
    insertDummyAd(adManagerValue);
  } else if (adManagerValue === "ad-manager-2") {
    // code for ad manager 2
    insertDummyAd(adManagerValue);
  } else {
    // code for default ad manager
    insertDummyAd("default ad manager");
  }
}

Example Riddle with project ad slot

Variable content

Complete project ad slot code

<script>

function riddleDataLayerListener(event) {
  if (!event.data.isRiddleDataLayerEvent) {
    return;
  }

  var adMangager = event.data.riddleDataLayer.find(
    (f) => f.key === "ad-manager"
  );
  
  const adManagerValue = adMangager.value; // ad-manager-1, ad-manager-2, default

  if (adManagerValue === "ad-manager-1") {
    // code for ad manager 1
    insertDummyAd(adManagerValue);
  } else if (adManagerValue === "ad-manager-2") {
    // code for ad manager 2
    insertDummyAd(adManagerValue);
  } else {
    // code for default ad manager
    insertDummyAd("default ad manager");
  }
}

function sendMessage() {
  window.parent.postMessage(
    {
      "ad-iframe-bottom": document.body.offsetHeight,
    },
    "*"
  );
}

function insertDummyAd(adManager) {
  // remove any existing ad
  var ads = document.querySelectorAll("div");
  ads.forEach((ad) => {
    ad.remove();
  });

  var ad = document.createElement("div");
  ad.style.width = "100%";
  ad.style.height = "100px";
  ad.style.backgroundColor = "lightgray";
  ad.style.textAlign = "center";
  ad.style.lineHeight = "100px";
  ad.style.fontWeight = "bold";
  ad.style.color = "white";
  ad.style.fontSize = "24px";
  ad.innerHTML = "Ad from " + adManager;
  document.body.appendChild(ad);
}

(function () {
  insertDummyAd("default ad manager");

  sendMessage();

  // Listen for Riddle events
  window.addEventListener("message", riddleDataLayerListener);

  var height = document.body.offsetHeight;
  setInterval(function () {
    if (height != document.body.offsetHeight) {
      sendMessage();
      height = document.body.offsetHeight;
    }
  }, 100);
})();

</script>