PRODUCT
Follow

Important: You need special permissions to create variables. For more information contact support@sizmek.com.

Overview

You can use an unlimited number of variables in your HTML5 ad when you want to create dynamic items in your ad that can change during runtime, such as images, text, videos, and ad behavior. This is similar to using the Smart Versioning feature in non-HTML5 ads.

To add variables in your HTML5 ad, you can create a variable in your HTML file (var myVariable = EB._adConfig.customJSVars.myVariable;) and then define your variables using the Variable option in the Sizmek MDX platform. See the example below for more information on how to implement the variables.

Note:You need special permissions to create variables. For more information contact support@sizmek.com.

Procedure
  1. Using either inline javascript or an external javascript file, define the required dynamic variables and set them to the values that you can read from the platform, using the syntax EB._adConfig.customJSVars.variableName. It is a best practice to check for the existence of EB._adConfig before setting these variables, and to have default values in place so that you can test locally.
  2. Replace all of the dynamic elements of your HTML with the variables that you created. For example, this might include changing the src attribute of an image tag or replacing paragraph text. Remember that you can leverage these variables however you like, so one variable could potentially control multiple elements if necessary.
  3. Upload your Workspace to the Sizmek MDX platform.
  4. Create your ad.
  5. Go to Advanced Features and then expand Variables.
  6. Define your variables by providing names and values. For more information about variables, see Defining Custom Variables.

Example

In your HTML, you will have some images or text elements that you want to make dynamic (here we have an image and some paragraph text). They should have default values for testing, but you will soon replace their values with the dynamic variables from the platform. It is recommended to give each element an id attribute for easy reference.

Code Example

<img id="Img1" src="images/mobile_icon.png"/>
<p id="headline1Txt">is...</p>

Next you will initiate the API as usual with HTML5 ads, and make sure it is initialized before setting your dynamic elements.

Code Example 

<script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
<script type="text/javascript">
if (!EB.isInitialized()) {
EB.addEventListener(EBG.EventName.EB_INITIALIZED, onInit); } else
{ onInit(); } function onInit() { //Check to see if the ad is in a live environment in the platform. if(EB._adConfig) { //Create variables and set them to the values of the variables you configured in the ad settings interface var headline1 = EB._adConfig.customJSVars.headline1;var image1 = EB._adConfig.customJSVars.image1; //Replace the values of your image/text/etc. items as needed. In this example we used Jquery, but you can use plain Javascript if you would like. $("#headline1Txt").text(headline1);$('#Img1').attr('src', image1);
}
} </script>
Code Example

<script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
<script type="text/javascript">
 
if (!EB.isInitialized()) {
    EB.addEventListener(EBG.EventName.EB_INITIALIZED, onInit);
}
else {
    onInit();
}
function onInit() {
    //Check to see if the ad is in a live environment in the platform. 
    if(EB._adConfig) {
        //Create variables and set them to the values of the variables you configured in the ad settings interface 
        var headline1 = EB._adConfig.customJSVars.headline1;var image1 = EB._adConfig.customJSVars.image1;
        //Replace the values of your image/text/etc. items as needed. In this example we used Jquery, but you can use plain Javascript if you would like. 
        $("#headline1Txt").text(headline1); 
        $('#Img1').attr('src', image1); 
    } 
} 
</script>

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments