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, for example images, text, videos, ad behavior, etc. This is similar to using the Smart Versioning feature in non-HTML5 ads.

To add variables in your HTML5 ad, simply create a variable in your HTML file,i.e., 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 your desired dynamic variables and set them to the values you can read from the platform, using the syntax EB._adConfig.customJSVars.variableName. It is 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 you've created. This could be changing the src attribute of an image tag, or replacing paragraph text for example. 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 image, text elements etc. 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's best 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 per usual with HTML5 ads, and make sure it's 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.customJS

>Vars.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