Ad/Pixel/Beacon Tag Integration with CMP JS

This article describes how you or your partners who wish to read consent from the CMP can query the CMP API to get consent parameters. Any partners running on your sites who support the Transparency & Consent Framework can check consent using the JS API. This may also be helpful if you work with partners who cannot read consent automatically from the CMP JS. In this case, you may need to read the consent parameters directly so that you can populate those into your partner tags.

 

Same frame integration

  1. Retrieve the consent information by calling the getConsentData method
  2. Append consent string and EU jurisdiction flag in ad/pixel calls

    window.__cmp('getConsentData', null, function (result) {
       // consentData contains the base64-encoded consent string
       var consentData = result.consentData;
      
       // gdprApplies specifies whether the user is in EU jurisdiction
       var gdprApplies = result.gdprApplies;

       // pass these 2 values to all ad / pixel calls
    });

 

Iframe integration

  1. Retrieve the consent information by posting a message to the parent frame
  2. Append consent string and EU jurisdiction flag in ad / pixel calls

The postMessage() function can be used from an iframe to send calls to a parent's (or ancestor's) frame’s __cmp() function. The frame to send the postMessage to can be determined by the ancestor with a .frames["__cmpLocator"] child iframe present.

 

CMP tags will install an event handler to call __cmp() for postMessage events, returning the data via a postMessage event. This is included as part of the CMP stub tag, so that postMessage events can be handled as early as possible.

Below is a wrapper function that emulates the same frame __cmp() call. It locates the ancestor frame running the CMP, performs the postMessage and listens for the return message and passes its values to the callback:

 

if (!window.__cmp) {
   // find the CMP frame
   var f = window;
   var cmpFrame;
   while (!cmpFrame) {
       try {
           if (f.frames["__cmpLocator"]) cmpFrame = f;
       } catch (e) {
       }
       if (f === window.top) break;
       f = f.parent;
   }

   var cmpCallbacks = {};

   /* Set up a __cmp function to do the postMessage and
      stash the callback.
      This function behaves (from the caller's perspective)
      identically to the same frame __cmp call */
   window.__cmp = function (cmd, arg, callback) {
       if (!cmpFrame) {
           callback({msg: "CMP not found"}, false);
           return;
       }
       var callId = Math.random() + "";
       var msg = {
           __cmpCall: {
               command: cmd,
               parameter: arg,
               callId: callId
           }
       };
       cmpCallbacks[callId] = callback;
       cmpFrame.postMessage(msg, '*');
   }

   /* when we get the return message, call the stashed callback */
   window.addEventListener("message", function (event) {
       var msgIsString = typeof event.data === "string";
       var json = event.data;
       if (msgIsString) {
           try {
               json = JSON.parse(event.data);
           } catch (e) {}
       }

       if (json.__cmpReturn) {
           var i = json.__cmpReturn;
           cmpCallbacks[i.callId](i.returnValue, i.success);
           delete cmpCallbacks[i.callId];
       }
   }, false);
}
   
/* example call of the above __cmp wrapper function */
window.__cmp('getConsentData', null, function (result, success) {
   if (success) {
       // consentData contains the base64-encoded consent string
       var consentData = result.consentData;

       // gdprApplies specifies whether the user is in EU jurisdiction
       var gdprApplies = result.gdprApplies;

       // pass these 2 values to all ad / pixel calls
   } else {
       // an error occurred.
   }
});

 

safeFrame integration

Information on accessing the CMP from within a safeFrame can be found in the IAB CMP JS API spec here.

 

 

 

 

 

 

 

 

 

Have more questions? Submit a request