Custom Tag Management

When to apply?

When tags or pixels are embedded directly into a page, custom tag management may be required. The following techniques can be applied to perform custom tag management.

Methods

Get current privacy choices

The current privacy choices can be retrieved by calling the method getCurrentConsentDecision() as such:

window.WWUPCP.getCurrentConsentDecision()

It will return an object with a set of choices that the user has made. For example:

{
  doNotSell: false,
  doNotShare: true
}

There may also be cases where you want to perform an action based on a new or changing choice by the user. In that case, an event API is available.

const { WireWheelSDK } = window.cmpJavascriptSdk
const embeddedHandler = WireWheelSDK.initEmbeddedParent({
  targetIframe: document.getElementById("wwiframe")
})

embeddedHandler.on('consent:write', (message) => {
  const { actions } = message.data
  logMessage(message)
})

// Listen events in child application
embeddedHandler.on('login', (message) => {
  logMessage(message)
})

embeddedHandler.on('logout', (message) => {
  logMessage(message)
})

function logMessage(message) {
  console.log(message);
}

Example

Original Code

<script type="text/javascript" src="https://example.com/scriptfile.js"></script>

Updated Code

Change the src attribute to data-src to prevent the script from loading automatically. Then decorate the HTML with the privacy choice that needs to be true in order for the script to load.

<script type="text/javascript" data-privacy-choice="doNotSell" 
        data-src="https://example.com/scriptfile.js"></script>

The below JavaScript can be used for general purpose deferred loading. It should be invoked after all deferred items have been rendered on the page.

// get the user's privacy choices
const conditions = window.WWUPCP.getCurrentConsentDecision();
// find all elements with the attribute data-privacy-choice
const elements = document.querySelectorAll("[data-privacy-choice]");
elements.forEach((elem) => {
  // get the value of the attribute and check if its true or false
	if(conditions[elem.getAttribute('data-privacy-choice')])
	{
    // set the src attribute of the element to the value of the data-src attribute
		if (elem.tagName === 'SCRIPT') {
				elem.setAttribute('src', elem.getAttribute('data-src'));
		}		
	}
});