GWD - What is the Callback event to use when binding is completed from the feed (Dynamic Remarketing Adwords) ?

xavie...@gmail.com

unread,

Mar 1, 2018, 11:10:20 AM3/1/18

to Google Web Designer beta

Hello !

I am currently trying to use one single feed for 4 different format of ads.(300x250,300x600,160x600,728x90). Each of them use a different image background (different size and cropping).

The feed will contain in the URL column the last part of the image url : myimage.jpg... the true url to be constructed would be https://www.mydomain.com/dam/300x600/myimage.jpg?wid=300&fit=1. The first part will be constructed on the load by the Ad itself and would allow any add to use one single feed.

In order to do so, I would do the following in my <body> loading 2 <img>, one to bind the source from the feed and the second one to show the image in the ad after url re-construction :

The at the bottom I would like to trigger the following JS :

function RewriteSrc() {

//Retrieves the URL generated by the feed "myimage.jpg"
var imgSrc = document.getElementById("img_hidden").src;
//cleans the previous value in case there are other element surronding the image name (removing the first part of url and possible query strings
var a_imgSrc = imgSrc.substr(imgSrc.lastIndexOf('/') + 1);
var b_imgSrc = a_imgSrc.split("?")[0];
// construct the New Url with the full Path and the query string
var n_imgSrc = "https://www.mydomain.com/dam/300x600/" + b_imgSrc + "?wid=300&fit=hfit,1";
//Set this new URL as the value of the SRC of the displayed <img>
document.getElementById("img_displayed").src = n_imgSrc;

}

The only issue is that the above is triggered to early in the code. The bidding (feed loaded) did not happened yet when this is triggered.

I have added this code in the below function :

function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
RewriteSrc();
}, 0);

}

It works in Chrome and IE 11+ ... but nothing on Firefox.

I see 2 possible reasons :
1. I am not using the right Callback function
2. What I am trying to do is not a best practice (re-consctruct an image url in the Ad). If so How to manage different Ad formats with their respective image sources as a dynamic Remarketing feed in Adwords allows only one image source column ?

Kent

unread,

Mar 1, 2018, 12:20:06 PM3/1/18

to Google Web Designer beta

Yes, this should be possible but it's not common and one problem is knowing your viewport size (or trigger) at the time you manipulate that image source, here's 3 possible approaches:

You might try your code in the handleAdInititalized event
You could manipulate that source tag with JS as you have done but call your code in the transformDynamicData function (see Adwords template "Dynamic Remarketing Scrolling Panels with Headline" for an example).
You could load all four images into different image containers and then hide/show the correct one using JS. Multiple image URLs could be combined into one data field (separate each URL with a character like pipe"|" and use the dataTransformer above to parse out the 4 image sources).

Hope that helps,

Kent

Google Web Designer team

xavie...@gmail.com

unread,

Mar 2, 2018, 9:39:43 AM3/2/18

to Google Web Designer beta

Hi Kent and thanks for the answer !
Actually the script is not working at all in handleAdInititalized(event).

I tried the below to test :
function handleAdInitialized(event) {
console.log("image source:" + document.getElementById("img_bk").src);

}

but the console is showing the following errors :

VM61 index.html:656 Uncaught TypeError: Cannot read property 'src' of null
at handleAdInitialized (VM61 index.html:656)
at m (gwddoubleclick_min.js:1)
at HTMLElement.f.ga (gwddoubleclick_min.js:17)
at HTMLElement.f.ea (gwddoubleclick_min.js:16)
at HTMLElement.f.V (gwddoubleclick_min.js:16)
at HTMLElement.f.aa (gwddoubleclick_min.js:15)
at HTMLElement.<anonymous> (gwddoubleclick_min.js:14)
at HTMLElement.f.Z (gwddoubleclick_min.js:15)
at HTMLElement.f.initAd (gwddoubleclick_min.js:10)
at VM61 index.html:644

very strange...

Then I like the solution number 2 and 3.
But I cannot find ANY docuementation on how to use transformDynamicData().

I looked at the template you mentionned and the only reference to this function is the following :

function handleDomContentLoaded(event) {
// This is a good place to show a loading or branding image while
// the ad loads.
custom.transformDynamicData();
}

Once this function added how do I actually transform my Data ? Custom script ? if so Where ?

Thanks for your help !
Xavier

Kent

unread,

Mar 2, 2018, 10:42:33 AM3/2/18

to Google Web Designer beta

Ok, thanks for testing #1. Option #2 transformDynamicData(); may be your best bet.

Call it as shown in that template, then customize that function in the file common/custom.js

inside that function is where you can add your custom code, see screenshot:

line#179 - create a reference to your background image

line#186 - loops through all items in your ad, this is where you can access the imageURL for each (of 6) items

The next 3 lines are doing the work of modifying that data so that is where you'd change your url string (replacing the Japanese space conversion). At that point you'll need some trigger to know what ad size you're changing to... you might use offset width or height to determine the ad size.

I'm assuming your background image needs to be dynamic (and 4 sizes). FYI-if the background is not dynamic (but still 4 sizes) then a different static background image can be uploaded for each size in the "previous Adwords" UI. I don't know if that feature will be supported in the new Adwords Beta UI.

Reply all

Reply to author

Forward