When you build ads using a Workspace template, the ads need to be uploaded and set up in Amazon Ad Server (AAS). During the setup process, AAS 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, AAS 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 AAS code before uploading the Workspace.
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 AAS 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");
}
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>
Comments