PRODUCT

Amazon Ad Server will be sunset in Q4 2024, please visit this page (AAS offboarding information) for offboarding support resources and sunset FAQs. Details shared on that page represent the most up to date information in the Help Center, if you find disparate information in other resources please default to the information in the AAS offboarding information page accordingly.

Follow

Overview

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.

Adding the registerInteractions Function to Amazon Ad Server 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 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");
}

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