LogoLogo
Analytics HelperSirdata APISemantic APIA propos de Sirdata
English
English
  • Sirdata CMP
  • INSTALL
    • Web & Mobile web
    • AMP
    • Via a Tag Manager
      • Loading via Google Tag Manager
    • In a CMS
      • Loading in Shopify
      • Loading in Wordpress
      • Loading in Prestashop
      • Loading in Magento
      • Loading in Drupal
    • Cache Systems Exclusion
      • Autoptimize WordPress Plugin
      • Cloudflare WordPress Plugin
      • LiteSpeed WordPress Plugin
      • NitroPack WordPress Plugin
      • SG Optimizer WordPress Plugin
      • WP Super Cache WordPress Plugin
      • W3 Total Cache WordPress Plugin
      • WP Meteor Plugin for Wordpress
      • WP Rocket WordPress Plugin
  • CONSENT TRANSMISSION STANDARDS
    • Introduction
    • Google Consent Mode
      • Mandatory Prerequisite
      • Activation of Advanced Google Consent Mode
        • Via the Sirdata CMP
        • Via Google Tag Manager
      • Activation of Basic Google Consent Mode
        • Via the Sirdata CMP
        • Via Google Tag Manager
      • Activation via Sirdata CMP
      • Activation via Google Tag Manager
    • Microsoft UET Consent Mode
    • Microsoft Clarity Consent
  • CMP API
    • How it works
    • Examples
    • Working with iframes
  • Advanced features
    • Passive mode
    • Set language per user
    • Manually display the CMP
  • Script management
    • Remote Tags Management without a Tag Manager
    • Remote Tags Management with a Tag Manager
    • Tag Management with Google Tag Manager
    • Local script Management
    • Advanced configuration
    • Examples
    • Share the TC String
    • Tag Management setup service
  • Analytics
    • Google Analytics
  • F.A.Q.
    • Integration
      • Is Abconsent compatible with Stape?
      • Is ABConsent compatible with Addingwell?
    • Google Consent Mode V2
      • Google Consent Mode V2 utility
      • News Google Consent Mode V2
      • Advanced mode or basic mode
    • Packaging
      • Cookies management
      • Tags packaging
    • Cookie settings
    • Button operation
    • Button color
    • A/B test
    • Mobile, tablets ...
    • Multi-sites
    • Mobile display
    • Private browsing
    • AMP consent
    • AMP consent button
    • Tags conditionning
    • Google Ads
    • Error 6.1 Google
    • Google PageSpeed
    • Refusal & Targeted ads
    • Mozilla and adblocks
    • Wordpress, Joomla, etc ...
    • Shopify
    • Pricing
      • The Two Types of Licenses
      • What happens when I reach the limit of my monthly plan?
      • Do you offer a trial period?
      • What are the accepted payment methods?
      • Do you offer packages for very high volumes of hits?
      • Are unused hits carried over to the next month?
      • What is considered a Hit?
      • Can I change plans?
    • Content Security Policy (CSP)
    • Google
      • Problem gclid google
      • Google extensions
    • How to Verify the Integration of My CMP?
    • How to Identify the Cookies Present on Your Website?
    • Abconsent CMP is compatible with Taggr ?
  • CMP Services
    • CMP Configuration
    • CMP Integration
    • Tag Conditioning
    • Compliance audit
    • Extra-vendorlist
    • Video-Wall
    • Inventory Partners
    • Consulting
  • Links
    • Configure your CMP
    • Sirdata API
    • Semantic API
    • About Sirdata
    • Analytics Helper
Propulsé par GitBook
Sur cette page
  • Send a command
  • Retrieve the command result

Cet article vous a-t-il été utile ?

  1. CMP API

Working with iframes

PrécédentExamplesSuivantPassive mode

Dernière mise à jour il y a 1 an

Cet article vous a-t-il été utile ?

iframes on your website can use the commands provided by the . They can do this by making calls to the parent's (or ancestor's) frame that the CMP is loaded on, sending the commands as a message with the postMessage() function.

The frame to make the call to can be determined by the ancestor by looking for a.frames["__tcfapiLocator"] child.

Send a command

The message to send should have the below form where the __tcfapiCall object holds the information about the command to execute. command and parameter are the same as the parameters passed to the __tcfapi() function, and callId est un ID unique à déterminer.

{
  __tcfapiCall: {
   command: *command*, // name of the command to execute
   version: 2, // version of the TCF specification
   parameter: *parameter*, // parameter to be passed to the command function
   callId: *uniqueId* // unique call ID
   }
}
this.callId = this.callId || 0;
var message = {
	__tcfapiCall: {
		command: 'getTCData',
		version: 2,
		parameter: null,
		callId: ++this.callId
	}
};
window.top.postMessage(message, '*');

Retrieve the command result

Before sending messages, the iframe must define a JavaScript function to execute when a message is sent back. To do this, it must add a listener for the event message with the window.addEventListener() function. By doing this, it will be able to receive and process the command result in __tcfapiReturn.

Thewindow.addEventListener()function is different from the command, which is included in the CMP API.

function processMessage(event) {
	if (event && event.data && event.data.__tcfapiReturn && event.data.__tcfapiReturn.success) {
		console.log(event.data.__tcfapiReturn.returnValue);
	}
}
window.addEventListener('message', processMessage);

When a command is sent, the returned message (event.data) holds the __tcfapiReturn object with the command result. returnValue and success are the same as the parameters passed to the callback of the __tcfapi() function, and callId is the ID from the origin call (__tcfapiCall).

{
    __tcfapiReturn: {
      returnValue: *returnValue*, // result of the command
      success: *boolean*, // true if the call to the command was successful
       callId: *uniqueId* // call ID sent in the __tcfapiCall
    }
}
function processMessage(event) {
	if (event && event.data && event.data.__tcfapiReturn && event.data.__tcfapiReturn.success) {
		var tcData = event.data.__tcfapiReturn.returnValue;
		if (!tcData.gdprApplies) {
			console.log("GDPR doesn't apply to user");
		}
		console.log("TC String : ", tcData.tcString);
	}
}
window.addEventListener('message', processMessage);

this.callId = this.callId || 0;
var message = {
	__tcfapiCall: {
		command: 'addEventListener',
		version: 2,
		parameter: null,
		callId: ++this.callId
	}
};
window.top.postMessage(message, '*');

Below is an example script that emulates the in-frame __tcfapi() 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.

In other words, the scripts in the iframe will work as if the CMP was loaded directly into it.

<script>
    !function(){let a=window,c;const o={};for(;a;){try{if(a.frames.__tcfapiLocator){c=a;break}}catch(a){}if(a===window.top)break;a=a.parent}window.__tcfapi=function(a,t,n,e){c?(t={__tcfapiCall:{command:a,parameter:e,version:t,callId:e=Math.random()+""}},o[e]=n,c.postMessage(t,"*")):n({msg:"CMP not found"},!1)},window.addEventListener("message",function(a){let t={};try{t="string"==typeof a.data?JSON.parse(a.data):a.data}catch(a){}var n=t.__tcfapiReturn;n&&"function"==typeof o[n.callId]&&(o[n.callId](n.returnValue,n.success),o[n.callId]=null)},!1)}();
</script>
CMP API
addEventListener