PRODUCT
Follow

Overview

When you build ads using a Workspace template, the ads need to be uploaded and set up in Sizmek Ad Suite (SAS). During the setup process, SAS scans the code and searches for all of the interaction names (clicks, user, and automatic interactions). This ensures that interactions are recorded when the ad is live.

If the code includes an interaction whose name is created dynamically when the code runs, SAS cannot read the name; when the ad triggers the interaction, it will not be recorded in the campaign metrics. Therefore, when you work with dynamic interactions, you must add all of the interaction names in the SAS code before uploading the Workspace.

Adding the registerInteractions Function to Sizmek Ad Suite Code

Add the following function to your JavaScript file. Make sure that you include this function in all of the interactions that will be called dynamically.

This function does not need to be called in the code, but it must be included in the JavaScript file so that SAS finds the interaction names when scanning the code.

function registerInteractions() {
	// Replace this example interactions with the interactions you will need in your project
	EB.clickthrough("clickInteraction_1");
	EB.clickthrough("clickInteraction_2");
	EB.clickthrough("clickInteraction_3");
	EB.userActionCounter("userInteraction_1");
	EB.userActionCounter("userInteraction_2");
	EB.userActionCounter("userInteraction_3");
	EB.automaticEventCounter("automaticInteraction_1");
	EB.automaticEventCounter("automaticInteraction_2");
	EB.automaticEventCounter("automaticInteraction_3");
}

Example

The following code example shows an HTML file that includes three buttons in different colors. Each button will be called dynamically and needs differentiated metrics.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Example Dynamic Interactions</title>
	<script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script>
	<style>
		.container {
		            position: absolute;
		            top: 0;
		            left: 0;
		            width: 300px;
		            height: 250px;
		        }
		
		        button {
		            position: absolute;
		            top: 0;
		            width: 100px;
		            height: 250px;
		            outline: none;
		            border: none;
		            cursor: pointer;
		        }
		
		        #red {
		            background-color: rgb(255, 0, 0);
		            left: 0;
		        }
		
		        #green {
		            background-color: rgb(0, 255, 0);
		            left: 100px;
		        }
		
		        #blue {
		            background-color: rgb(0, 0, 255);
		            left: 200px;
		        }
	</style>
	<script>
		function checkIfAdKitReady(event) {
		            adkit.onReady(initializeCreative);
		        }
		
		        function initializeCreative(event) {
		            document.getElementById("red").addEventListener("click", clicked);
		            document.getElementById("green").addEventListener("click", clicked);
		            document.getElementById("blue").addEventListener("click", clicked);
		        }
		
		        function clicked(event) {
		            console.log("Clicked on Color_" + event.target.id);
		            EB.clickthrough("Color_" + event.target.id);
		        }
		
		        function registerInteractions() {
		            EB.clickthrough("Color_red");
		            EB.clickthrough("Color_green");
		            EB.clickthrough("Color_blue");
		        }
		
		        window.addEventListener("load", checkIfAdKitReady);
	</script>
</head>

<body>
	<div class="container">
		<button id="red"></button>
		<button id="green"></button>
		<button id="blue"></button>
	</div>
</body>

</html>
Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments