PRODUCT
Follow

Prerequisite

Before proceeding please make sure that you completed all of the steps marked in this guide in order to be able to work with our API within GWD - Google Web Designer | Setting Up a Project

Structuring your config.js file

Base formatting for any config.js file used for dynamic GWD ads looks like the below, with svData array being comprised of dynamic item objects:

define({
  "SV": {
    "svData": [
	//your array of smart item objects
    ]
  }
});

There are 4 types of objects we can use. String, HTML, Image and Video

String:

You just need to set the "svType" to "String", and then choose a "svKey" you will use to reference "value". Once the ad is setup on the platform, this can be changed for each version, however when reviewing locally, seeing that the ad is pulling in the value from config.js is proof of a working implementation.

{
      "svKey": "copyText",
      "svType": "String",
       "value": "Copy text"
}

adkit-html:

Set the "svType" to "adkit-html", and then choose a "svKey" you will use to reference "value". Once the ad is setup on the platform, this can be changed for each version, however when reviewing locally, seeing that the ad is pulling in the value from config.js is proof of a working implementation.

{
      "svKey": "copyText",
      "svType": "adkit-html",
       "value": "<strong style='color:red;'>Copy text<strong>"
}

 Image:

Make the "svType":"Image", choose a  "svKey" to reference it in the setDynImg method. Once the ad is setup on the platform, this can be changed for each version , however when reviewing locally, seeing that the ad is pulling in the value from config.js is proof of a working implementation.

{
"svKey": "imageOne",
"svType": "Image",
"value": "img1.jpg"
}

Video & Poster:

Make the "svType":"Image", choose a  "svKey", set the poster up as a  separate "svType":"Image", reference Video and Poster "svKey" in setDynVid method here. Once the ad is setup on the platform, this can be changed for each version, however when reviewing locally, seeing that the ad is pulling in the value from config.js is proof of a working implementation.

{
"svKey": "videoFile",
"svType": "Video",
"value": "video1.mp4"
},
{
"svKey": "videoPoster",
"svType": "Image",
"value": "poster.jpg"
}

String used for Dynamic Clickthrough

We make a normal string and later use it in a method as a second argument.

{
      "svKey": "dynamicClickthrough",
      "svType": "String",
       "value": "https://www.sizmek.com/"
}

 Example of config.js file with all 4 different applicable svType variations:

define({
  "SV": {
    "svData": [
	{
            "svKey": "copyText",
            "svType": "adkit-html",
            "value": "Copy text"
        },
	{
            "svKey": "copyText",
            "svType": "String",
            "value": "Copy text"
        },
	{
            "svKey": "dynamicClickthrough",
            "svType": "String",
            "value": "https://www.sizmek.com/"
        },
	{
            "svKey": "youtubeVideo",
            "svType": "String",
            "value": "dQw4w9WgXcQ"
        },
	{
	    "svKey": "imageOne",
	    "svType": "Image",
	    "value": "images/img1.jpg"
	},
	{
            "svKey": "videoFile",
            "svType": "Video",
	    "value": "video1.mp4"            
        }
    ]
  }
});

Make sure to copy all your initial assets as well as the created config.js file to the publish folder of your project.

When you are done coding your config.js file you need to go back to this step

and load the config.js file in your Base Component as explained in step 3.

Using Dynamic Text 

If you defined a dynamic item with "svType" set to "String" you should be able to pull that value in to google web designer's stage using a code snippet.

Process:

1. Create a new text element on the stage with a text tool, and give it an ID - "szmk_text" in the example below. Make sure not to actually write any letters in the text box.

2. Go to the very first frame of the stage, and create a new event.

3. And a new custom action

4. Use the code snippet below to load the string from dynamic item in config.js in to the innerHTML of the text element we created previously and gave it an id of 'szmk_text'.

adkit.onReady(function() {
document.getElementById('szmk_text').innerHTML = adkit.getSVData("copyText");
});

 If you have multiple texts you can group them all inside of a single adkit.onReady(function(){

adkit.onReady(function() {
document.getElementById('szmk_text').innerHTML = adkit.getSVData("copyText");
document.getElementById('szmk_html').innerHTML = adkit.getSVData("copyHTML");
});

Example of dynamic item from config.js used in adkit.getSVData("copyText") function:

{
      "svKey": "copyText",
      "svType": "String",
       "value": "CTA copy"
}

 5. You can now animate your text element and change text properties

You should be able to see values from config.js on your preview when hitting ctrl+enter.

Using Dynamic HTML

Process:

1. Create a new text element on the stage with a text tool, and give it an ID - "szmk_html" in the example below. Make sure not to actually write anything in the text box.

2. Go to the very first frame of the stage, and create a new event.

3. And a new custom action

4. Use the code snippet below to load the HTML from dynamic item in config.js in to the innerHTML of the text element we created previously and gave it an id of 'szmk_html'.

adkit.onReady(function() {
document.getElementById('szmk_html').innerHTML = adkit.getSVData("copyHTML");
});

 If you have multiple texts html elements  you can group them all inside of a single adkit.onReady(function(){

adkit.onReady(function() {
document.getElementById('szmk_text').innerHTML = adkit.getSVData("copyText");
document.getElementById('szmk_html').innerHTML = adkit.getSVData("copyHTML");
});

Example of dynamic item from config.js used in adkit.getSVData("copyHTML") function:

{
      "svKey": "copyHTML",
      "svType": "String",
       "value": "<strong>Copy HTML</strong>"
}

 5. You can now animate your text element which gets injected with dynamic html

You should be able to see values from config.js on your preview when hitting ctrl+enter.

Using Dynamic Image Component

Please make sure you installed the dynamic image component as instructed on this page:
Google Web Designer

Process:

1. Drag and drop your dynamic image component from the components library on to the stage:

2. Go to properties of the component and reference a "svKey" from your config.js file's dynamic image item you want to display here.

Dynamic item from config.js used in this example:

 {
"svKey": "imageOne",
"svType": "Image",
"value": "img1.jpg"
}

3. Set image fitting properties

The Image component will fitt your image in the container based on how you set it up:

4. Copy the image referenced in config.js file in to the preview or publish folder in order to be able to preview the functionality when you hit "ctrl+enter".

5. Animate / position / resize your component just like as if it was a google web designer native element.

Using Dynamic Simple Video Component

1. Drag and drop your dynamic simple video component from components library on to the stage.

2. Reference a "svKey" from your config.js file's dynamic video item you want to display here(webm is optional).

Dynamic item from config.js used in this example:

 {
"svKey": "videoFile",
"svType": "Image",
"value": "video1.mp4"
}

3. Set Poster "svKey"

Dynamic image item from config.js used as a poster in this example:

 {
"svKey": "posterOne",
"svType": "Image",
"value": "poster.jpg"
}

4. Copy the video and poster image referenced in config.js file in to the preview or publish folder in order to preview the functionality.

5. Animate / position / resize your component just like as if it was a google web designer native element. 

Using Dynamic YouTube Video Component

1. Drag and drop your dynamic YouTube video component from components library on to the stage.

2. Reference a "svKey" from your config.js file's dynamic string item containing the URL to the youtube video you want to display here.

3. Set Player Properties

4. Animate / position / resize your component just like as if it was a google web designer native element. 

Tracking Interactions with Dynamic Clickthrough URL:

Primary Clickthrough - EB.clickthrough(); without arguments is made dynamic automatically if setup on the platform > ad > mass versioning setup.

Dynamic interaction URL only needs to be used for secondary / additional clickthrough URL tracking with dynamic URL's.

//Correct Dynamic creative usage:
EB.clickthrough("cta1", adkit.getSVData("cta1url"));
EB.userActionCounter("interacted", adkit.getSVData("interactedurl"));

Example for additional interactions from config.js used in snippets above

{
      "svKey": "cta1url",
      "svType": "String",
       "value": "https://www.sizmek.com/"
},
{ "svKey": "interactedurl", "svType": "String", "value": "https://www.sizmek.com/" }

 You can track additional interactions or use other methods from our API listed here:
Sizmek HTML5 API

 

Additional resources:

Google Web Designer index and component installation guide:

Using Sizmek API functionalities & Sizmek GWD components:

For information on building Sizmek HTML5 base formats please visit:  

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

Comments