DoubleClick Studio Dynamic feed into Animate.
Hi all,
I need help trying to find a way to use Animated and DoubleClick Studio (DCS) Dynamic feed.
I know if you put code in the action panel, and you export animate, it creates a .js file with that code.
So grabbing the code from (DCS) and placing it into a keyframe within animate is all good. The problem is, calling out
a movieclip id within animate and getting DCS code to see it.
What normally happens is DCS calls the <img id="product"> in the html and populates it with a image.
DCS Code
creative.setupDOMElements = function () {
creative.domElements = {};
creative.domElements.product = document.getElementById('product');
};
Since Animate writes all the properties id in .js, I need to change DCS code to find the 'product' id in the .js instead.
Hope that makes sense? Does anyone know what code I need to change, so it works?
Full DCS code is here:
// Setup namespace for ad.
var creative = {};
creative.init = function () {
creative.setupDOMElements();
// Check if Enabler is initialized.
if (Enabler.isInitialized()) {
// Check if ad is visible to user.
if (Enabler.isVisible()) {
creative.enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.VISIBLE,
creative.enablerInitHandler);
}
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT,
creative.enablerInitHandler);
}
};
creative.setupDOMElements = function () {
creative.domElements = {};
creative.domElements.background = document.getElementById('background');
creative.domElements.headline = document.getElementById('headline');
creative.domElements.subline = document.getElementById('subline');
creative.domElements.button = document.getElementById('button');
creative.domElements.product = document.getElementById('product');
creative.domElements.cta = document.getElementById('cta');
};
creative.enablerInitHandler = function (event) {
creative.dynamicDataAvailable();
creative.domElements.button.addEventListener('click', creative.exitClickHandler);
creative.showAd();
if (Enabler.isPageLoaded()) {
creative.pageLoadHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.PAGE_LOADED, creative.pageLoadHandler);
}
};
creative.dynamicDataAvailable = function () {
// NOTE: Here starts the pasted section from Studio.
Enabler.setProfileId(1027261);
var devDynamicContent = {};
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered= [{}];
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0]._id = 0;
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Unique_ID = 1;
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Reporting_Label = "Older_Male_Audience";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Background_Image = {};
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Background_Image.Url = "https://s0.2mdn.net/ads/richmedia/studio/pv2/32261782/dirty/retail_audiences_men.png";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Headline = "Shaving Cream";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Headline_Color = "000000";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Headline_Left = "4px";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Headline_Top = "17px";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Subline = "$2.00 OFF!";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Subline_Color = "ffffff";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Subline_Left = "4px";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Subline_Top = "45px";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].CTA_Button_Image = {};
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].CTA_Button_Image.Url = "https://s0.2mdn.net/ads/richmedia/studio/pv2/31681678/dirty/cta_btn_red.png";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].CTA_Button_Left = "80px";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].CTA_Button_Bottom = "15px";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].CTA_Text = "PROMO CODE";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].CTA_Text_Bottom = "15px";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].CTA_Text_Left = "100px";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].IsDefault = false;
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Exit_URL = {};
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].Exit_URL.Url = "http://www.google.com";
devDynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0].IsActive = true;
Enabler.setDevDynamicContent(devDynamicContent);
// NOTE: Here ends the pasted section from Studio.
// Variable "dynamicContent" gets automatically initialized by Enabler.
// Change "Travel_Packaged_Solutions_AB" to the name of your dynamic elements.
creative.dynamicData = dynamicContent.Dynamic_Vertical_Solution__Retail_Audience_Triggered[0];
// Set your dynamic exit url so it can be used in initial.js.
creative.dynamicExitUrl = creative.dynamicData.Exit_URL.Url;
creative.domElements.cta.style.visibility = 'hidden';
creative.domElements.button.style.visibility = 'hidden';
creative.domElements.product.style.visibility = 'hidden';
creative.domElements.subline.style.color = "#" + creative.dynamicData.Subline_Color;
creative.domElements.subline.style.left = creative.dynamicData.Subline_Left;
creative.domElements.subline.style.top = creative.dynamicData.Subline_Top;
creative.domElements.headline.style.color = "#" + creative.dynamicData.Headline_Color;
creative.domElements.headline.style.left = creative.dynamicData.Headline_Left;
creative.domElements.headline.style.top = creative.dynamicData.Headline_Top;
creative.domElements.cta.innerHTML = creative.dynamicData.CTA_Text;
creative.domElements.cta.style.left = creative.dynamicData.CTA_Text_Left;
creative.domElements.cta.style.bottom = creative.dynamicData.CTA_Text_Bottom;
creative.domElements.button.style.left = creative.dynamicData.CTA_Button_Left;
creative.domElements.button.style.bottom = creative.dynamicData.CTA_Button_Bottom;
};
creative.exitClickHandler = function (event) {
Enabler.exit('exit', creative.dynamicExitUrl);
};
creative.pageLoadHandler = function (event) {
creative.domElements.background.src = creative.dynamicData.Background_Image.Url;
creative.domElements.button.src = creative.dynamicData.CTA_Button_Image.Url;
creative.domElements.cta.style.visibility = 'visible';
creative.domElements.button.style.visibility = 'visible';
creative.domElements.product.style.visibility = 'visible';
creative.domElements.headline.innerHTML = creative.dynamicData.Headline;
creative.domElements.subline.innerHTML = creative.dynamicData.Subline;
};
// Is triggered when the background image in polite.js was fully loaded.
creative.showAd = function () {
document.getElementById('content').className = "show";
document.getElementById('loader').className = "hide";
};
// Start creative once all elements in window are loaded.
window.addEventListener('load', creative.init.bind(creative));
AdChoices