Dynamic Ad - Feed Question

[Camilo Armando]

Hello,

I am working on a Dynamic Remarketing Ad for Google AdWords. I created the Ad using a Dynamic Remarketing Ad Template in Google Web Designer.

Here's a preview of the Ad binding data to a sample JSON file: 
http://camiloarmando.com/GWD

When I send the ZIP folder containing the HTML file to my client in order to upload the Ad to his AdWords account, Adwords tells him that "it can't bind the feed". And that's pretty understandable, because the "Flight Feed Template" or "Data Schema" in Google Web Designer (see attached "Feeds.jpg"), is quite different from the CSV "Flight Feed Template" given by Google AdWords.

The CSV file I need the Ad to bind to contains only the following "Data" categories:

- Destination ID
- Origin ID
- Flight description
- Final URL
- Image URL
- Destination name
- Flight price
- Approval status
- Policies

Now, my question is: How am I supposed to bind the dynamic text fields to my client's CSV Feed, if I only have the designated "Headline, Design and Product" options in the "GWD Flight Feed Template"?

It looks like I could only bind the following data (from the "Product" category):

- Flight Description 
- Regular Price
- Image URL

How do I bind the rest of information?

Thanks,

Camilo

[San Khong]

Hi Camilo,

I saw that the Product > 0 only shows some the available binding objects and from the AdWords spec for flight schema, Google Web Designer does not show all the objects. I will log an issue so we can investigate that. From the AdWords help center, it looks like you should be able to bind what you need except for  Approval status and Policies. Can you please try typing in the data schema object such as Product.0.finalUrl in the dynamic dialog?

Do you have the feed json file that your client downloads from his AdWords campaign?

To download the json, in AdWords:

- When you create a campaign, add the feed id to it. 

- To upload an ad, choose to Ads tab, select the +Ad button and pick Ad Gallery

- Select Dynamic Ads 

- Select the right vertical for your ad, or custom image ad.

- Upload your ad using Upload your own layout

- When you preview, the blank preview page includes a link to “get data for custom layout​ for you to download the json.

Thanks,

San

Google Web Designer team

[Camilo Armando]

Hi San,

Thank you for getting back to me. 

I did a binding to "Product.0.Url" as requested—there's no option for "Product.0.finalUrl" on the GWD flight feed template. You can see how it's binding to "Destination" with a sample Google URL, when you choose the "five_product_feed.json" on the feeds dropdown menu. Here's the preview: 

http://camiloarmando.com/GWD2/

Right now, I have the following bindings:

• "Origin": Product.0.name
  
• "Destination": Product.0.Url (as requested)
• "Flight Price": Product.0.price
• "Origin Airport Code": Product.0.name | uppercase
• "Destination Airport Code": Product.1.name | uppercase
• "CTA Button" event: gwd-taparea_1 > click > gwd.exitToItem
  

Those bindings are somewhat placeholders for now, because I don't know what to bind them to. For example: the "Destination" dynamic text field should be binding to the "Destination name" data column on the CSV feed (see screenshot). But there's no option for me to bind it under the Product category.

The only product data schema objects available are (see screenshot):

• imageUrl
  
• name
  
• price
  
• regularPrice
  
• salePercentDiscount
  
• salePrice
  
• url
  

There are a lot more options for the Headline and Design categories, including most options on the left column dialog when creating an ad in Adwords (screenshots attached), but not enough for the Product category.

I would ask my client to download a JSON file, but at this point it won't do anything because I have no available data schema objects in the product category to bind the data to. I did download a JSON file from my own Adwords account that you can see in the link above called "feedtest.json". 

I also have my client's CSV feed file that has already been approved by Google. 

Please let me know what I should do next.

Thanks,

Camilo

[Camilo Armando]

Hi San,

I am following up on our conversation, did you get a chance to review my latest post?

Do you need any other information from me? 

Please let me know.

Thank you,

Camilo

[San Khong]

Hi Camilo,

Can you please ask for the json feed from the client so we can see what the bindable objects are in the feed?

[Camilo Armando]

Hi San,

Here's the JSON feed file from my client's Adwords account. 

Please let me know what the bindable objects are.

Thank you very much!

Camilo

[San Khong]

Hi Camilo,

I found a sample file that might be able to help you achieve what you need to do. I also escalate the feature request to have the travel schema added to Google Web Designer.

One thing that you can do is to use the available schema objects that you don't use, for example, product description, for origin, and use product name for destination.  If you need more schema objects such as origin airport code and destination airport code, etc. you can follow the example I attached and use product.0.name1, product.0.name2, product.0.name3. In the feed, make sure you use '|' to separate the items. The common (js) files in the sample will take care of parsing the product.0.name to appropriate bind to product.0.name2, etc so please make sure you include the common files in your file like in my sample file. You will need to ask your client to update the feed file to have the product name something like this (see flight_test.json in the feeds folder).

"Product_0_name": "Flying to the top destinations in US!|Chicago|Los Angeles"

where as product.0.name1 is Flying to the top destinations in US!

product.0.name2 is Chicago and product.0.name3 is Los Angeles.

Sorry for the convoluted workaround.

Hope it helps.

[Camilo Armando]

Hi San,

Thank you for your help. I see what you're saying, seems like a good solution. However:

• I've been trying to work on it, but the parsing doesn't seem to work. 
  
• The common (js) files I have are the ones that come with the Google Web Designer template. Are they good for this solution?
  
• I only have one bindable object available (Flight Description), it's feed attribute is "name" (see screenshot). There's no option for anything else in the product categories. Everything else is for design or for headline.
• The only thing that's working is the price.

If you choose the "adwords2.json" feed in the following preview, you'll see that I tried your solution: http://camiloarmando.com/GWD3/

• "Product_0_name":"Orlando Flights|Orlando|MCO" 
• "Product_2_name":"San Diego Flights|San Diego|SAN" 

But it was not acknowledging "Product_0_name1", "Product_0_name2", "Product_0_name3". So I just went back to "Product_0_name", that's why you see: "Orlando Flights|Orlando|MCO" and "San Diego Flights|San Diego|SAN". 

Is it not working because of the common (js) files I have? Or is it because the edits need to be made to the CSV file first? 

I actually just edited the JSON file for now. I will ask my client to enter the values on the CSV feed once I hear back from you regarding the common (js) files I need. 

If I copy and paste the common (js) files from the sample file you sent me, the design starts to break.

Call to Action Question

I want the CTA button to go to the URL on the feed product item (Final URL). Right now I have an Event attached to a tap area with the following code:

gwd-taparea_1 > click > gwd.exitToItem

Is that ok? How do I test it? 

Also, please see the screenshot attached: Why are the "Receiver" and "Configuration" steps not green and checked? What else do I need to do?

Thank you so much for your help!

Camilo

[San Khong]

Camilo,

Can you please try the common files from this zip I attached earlier? The common files in the templates do have the workaround for flights.  In the zip I attached, you can also test it out the workflow I described.  Please try that and let us know if you run into any problem.

To test exit locally, open the console and you will see it logged. You can't actually see it work until you test it on AdWords.

[Camilo Armando]

San,

I copied and pasted the common files you sent and it's still not working. I will try updating the CSV file with my client and will create a new JSON file to test and see if it works that way. 

In the screenshots attached, Origin City and Origin ID are supposed to be Dynamic, which means it will change depending on the ad's viewer location. 

On the feed screenshot attached Origin ID = 1. Now, how do I bind Origin ID if I can only bind Flight Description and Price as I've mentioned before? 

For the following Dynamic flight ad:

Dynamic City Code

Dynamic City Name

to

ATL

Atlanta 

What should I tell my client to write on the feed file? Something like this?

Flight Description

Atlanta Flights|Atlanta|ATL|Origin Name|1

 

Price

44 USD

 

or

Flight Description

Atlanta Flights|Atlanta|ATL

 

Price

44 USD|Origin Name|1

Thanks,

Camilo

[San Khong]

Hi Camilo,

Please use product.name for that instead of description.

"Product_0_name": "Atlanta Flights|Atlanta|ATL|Origin Name|1"

Thanks,

[Camilo Armando]

Hi San,

Product name is product description.

"Product_0_name" binds to Flight Description.

Camilo

[Camilo Armando]

Hi San,

I'm following up on our conversation. Did my last message make sense? 

Is it ok then, to just use "Product_0_name" for everything?

Lastly, "Origin City" should also be dynamic. If Origin ID = 1, then what should "Origin City" be equals to, in order for it to also be dynamic?

What should I tell my client? 

"Product_0_name": "Atlanta Flights|Atlanta|ATL|?|1"

Let me know.

Thanks!

Camilo

[Nivesh Rajbhandari]

Hi Camilo,

Make sure you have all the .js files (custom.js, common,js, util.js, etc.) from the zip San linked in her post. When I opened http://camiloarmando.com/GWD3/?feed=adwords2.json with Chrome Developer tools open, I noticed that you have a different version of the custom.js file. The custom.js file has the logic for converting the feed items with '|' separators into separate items.

Thanks,

Nivesh

Google Web Designer team

[Camilo Armando]

Hi Nivesh,

Ok, perfect. I will copy and paste the same .js files San sent and will test again. I'll let you know if it works.

But can you please answer my other question? 

"Origin City" should also be dynamic. If Origin ID = 1, then what should "Origin City" be in order to also be dynamic?

What should I tell my client? 

"Product_0_name": "Atlanta Flights|Atlanta|ATL|?|1"

Origin City = ? 

[Camilo Armando]

Hi Nivesh,

Can you please check and see if the following preview has the .js files I need?

http://camiloarmando.com/GWD4

Thanks,

Camilo

[Nivesh Rajbhandari]

Hi Camilo,

It seems like you have the correct files, but you since you are not using a Gallery component in your ad, you will have to change the following method in custom.js to comment out the gallery-specific code and un-comment the non-gallery code path:

 /**

   * Initialization. Called from handleAdInitialized on each page.

   */

  function init() {

    utils.log('custom.init()');

    var data = common.getAdData();

    if (!data) return;

    // If you're using the swipe gallery to display feed items.

    initItemsUsingGallery_();

    // If you're NOT using the swipe gallery to display feed items.

    //initItemsWithoutGallery_();

  }

TO:

 /**

   * Initialization. Called from handleAdInitialized on each page.

   */

  function init() {

    utils.log('custom.init()');

    var data = common.getAdData();

    if (!data) return;

    // If you're using the swipe gallery to display feed items.

    // initItemsUsingGallery_();

    // If you're NOT using the swipe gallery to display feed items.

    initItemsWithoutGallery_();

  }

Thanks,

Nivesh (GWD team)

[Camilo Armando]

Hi Nivesh,

I made the code change to the custom.js file. Here is the preview:

http://camiloarmando.com/GWD5/

However, if you select the "adwords2.json" feed, you'll see that Origin City is still not displaying correctly.

Let me know.

Thanks,

Camilo

[Nivesh Rajbhandari]

Hi Camilo,

I don't see a call to custom.transformDynamicData() like in the example San emailed.

In your index.html file, please update:

function handleDomContentLoaded(event) {

        // This is a good place to show a loading or branding image while

        // the ad loads.

      }

TO

function handleDomContentLoaded(event) {

        // This is a good place to show a loading or branding image while

        // the ad loads.

        custom.transformDynamicData();

      }

Thanks,

Nivesh (GWD Team)

[Camilo Armando]

Hi Nivesh,

I updated the index.html and it's starting to work. Here's the preview, please select the "adwords2.json" feed:

http://camiloarmando.com/GWD5/

The ad is pulling the following data from the "adwords2.json" feed: 

"Product_0_name":"Orlando Flights|Orlando|MCO|Origin City|1"

These are the dynamic bindings:

Product.0.name2 = Destination City

Product.0.name3 = Destination Code

Product.0.name4 = Origin City

Product.0.name5 = Origin Code

So now, how do I bind "Origin City" if it's not on the feed? 

And, if "Origin Code = 1" for all, does that mean that it will be dynamically generated depending on the viewer's location?

Thanks,

Camilo

[Camilo Armando]

Hi Nivesh,

I'm following up on our conversation. Did you get my questions regarding the Origin City and Origin Code?

Thanks!

Camilo

[avn...@gmail.com]

Hi Guys,
I have a very similar problem.
Using a CSV travel feed (adwords) that contains the fields:
Flight description
Origin ID
Origin name
Destination ID
Destination name
Flight price
Image URL
Final URL
- i cannot find the way to bring GWD to bind the "Origin name" and "Destination name". the only option it gives me is to show "Flight description".
now, following your advise to Camilo i also managed to amend the content within "Destination name" from "Origin - Destination" into "Origin|Destination" - also applying the changes with the .js files (custom.js, common,js, util.js, etc.)
however - it doesn't seem to work.

any advise?
Thanks!

[Kent Myers]

You'll most likely need to further customize the code in custom.js for your case and your naming convention. When previewing your work in a browser you'll want to check the console for errors and make sure the dataTransformer function in custom.js is being executed and then check each line to confirm it is parsing the data as expected.

kent

Google Web Designer team

[avn...@gmail.com]

Hi im attaching some screen shots, as when i preview my work it doesnt even load the dataTransformer function in the concole although i have replaced the files both in the regular and preview folder to the ones given here

pls advise!
Thanks,

[Kent Myers]

If it doesn't load the data transformer, that's a problem.

Referencing San's file from July10, see the line in the console "item data on handleDomContentLoaded:" and then the object can be expanded to show name2=Chicago & name3 Los Angeles. That's what you should be seeing in your file.

That function is called in the html by adding line# 282 custom.transformDynamicData():

      function handleDomContentLoaded(event) {

        // This is a good place to show a loading or branding image while

        // the ad loads.

        custom.transformDynamicData();

      }

If you're still stuck then you might consider starting again with San's working file and customize to your design, making sure to check after each edit that the dataTransformer stays working.

Hope that helps,

Kent

Google Web Designer team

[avn...@gmail.com]

Hi Kent,
I have started again, using San's file as base, only i need to place my objects inside of a group using a swipe gallery.
I know the process (did the binding before) - only when i bind the group with the gallery - the Origin and Destination dose not appear. i tried understating the custom file but in vain.
- If you could assist im adding here my working file and if you could have a look
I would like two things:

1. to make the Origin and destination appear when group is connected to the swipe gallery in the file.

2. for some reason when i remove the design elements in the jason file - the feed drop down (when previewing)- dosent appear and the ad appear empty - i would that dependency to be removed as well.

Pls Help!

Thanks,
Avner

[Kent Myers]

I get an error trying to open your file. Can you save your working folder as a ZIP archive, post to Drive, and share with us.

For question 2) some of those attributes in the test JSON need to be included, so be careful when removing them.

[avn...@gmail.com]

Thats the drive (gave u guys permission)
https://drive.google.com/drive/folders/0BwmE11tgc5cbYkNsSFhHTXJEdU0

- about question 2 - i dont mind having those prms on the preview jason - just wanna make sure i wont need them when i actually upload to google drive

[Kent Myers]

Thanks, your file looks pretty close, and the dataTransformer seems Ok, but the gallery setup missed a couple things (add class 'js-item' to your item, uncomment line#454 to initialize gallery, rename to 'swipegallery-items' to be consistent with our other templates code). Your JSON was failing due to the very last comma (included in all name-value pairs except the last one). Will look a little deeper Monday. In the meantime you might compare your gallery to one of the templates using the swipegallery component which should help get that working.

[Kent Myers]

Here's a sample file: Flights-split-text-with-gallery

Like San's file on this thread, this splits the name attribute from the feed into 3 parts; headline, origin, and destination.

Open in GWD, preview in a browser, load the flight-test feed... then open the console and check these things if you need to debug after customizing:

• See your data logged for each item and expand to reveal the split text parts... make sure that matches what you want
• Gallery plays automatically for 30s and stops
• Clicks anywhere on ad will exit to the correct (active) item url
• Mouseover gallery will stop autoplay animation (so it doesn't slip away just as you're trying to select an item)

[Camilo Armando]

Hello.

It's good to know that I'm not the only one having problems with these GWD templates. 

I have not been able to solve all the problems with the Ad. The "workaround" that San and Nivesh suggested only seems to work with up to 2-3 data bindings on the same line. Here's a preview of the ad so far binding to a sample feed: http://camiloarmando.com/GWD8/

It seems that with the suggested "workaround", I'll be able to bind Destination City and Destination ID only. The Price is also working and hopefully the CTA button will take the user where is intended. 

However, the last piece of the puzzle is Origin City and Origin ID. Please take a look at the Feed screenshots attached. The first one is an already AdWords approved Feed that my client filled out. Notice how the Origin ID column is full of 1's for all rows. Now, there's no way of binding that column on the GWD template. I can only bind the Price and the Flight Description as I've said many times on this thread. 

My quesitons is: How am I supposed to bind Origin ID and Origin City if they are dynamic? 

The way the Ad should work is like this: 

If I am a user looking for fligths from Detroit to Los Angeles on my client's website, and then I go to another website where the Ad may appear, I will see a flight deals from Detroit to Los Angeles. Now, Destination ID and Destination City are on the Feed and I can "control" them and bind them with the "workaround" that Navish and San suggested. But how do I bind "Orgin City" and "Origin ID" when they are supposed to depend on the user's search? 

Here's the exported Ad HTML if you want to explore the code:

http://camiloarmando.com/DynamicAdAug30/

Also, is it ok that I'm binding to Product 0? Will that take care of the dynamic aspect of the Ad? Meaning - will it display the appropriate flight row depending on the user's search?

Lastly, please see attached a screenshot of all the bindings taking place in GWD, and please let me know if they are correct.

Thanks.

[Kent Myers]

Those settings look correct. Can you not add your Origin ID & city to the description field (as additional pipe separated items) as shown in my sample file: Flights-split-text-with-gallery

The "Product.0..." syntax is correct when using the swipegallery even though it looks like it would only take the first item.

Hope that helps,

[Camilo Armando]

Ok, great. I won't bind Origin ID and Origin City to the description field as additional pipe separated items. But again: How do I bind Origin ID and Origin City now?

On the sample file you sent, it seems that Origin City is explicitly written in the feed. In my case, Origin ID is a column full of 1's in my client's feed - it depends on what the user searches for on my client's website. How do I bind it?

Here's the revised ad preview:

http://camiloarmando.com/GWD9/

Revised screenshots attached of the feed and all bindings. 

Thanks.

[Kent Myers]

Your description shows 3 parts separated by pipes. I think you want to add your items there like this:

Las Vegas Flights|Las Vegas|LAS|Origin ID|Origin City

Then in custom.js, the data transformer gets revised to include a 5th item (my sample file had 4 parts).

[Camilo Armando]

Ok, great. I will bind Origin ID and Origin City like you mentioned.

I imagine the following code in custom.js is the data transformer section that needs to be revised to include a 5th item. Would you mind please sending me the revised code like Nivesh previously did?

FROM THIS:

     /*

  * Custom transform dynamic data for data validation.

  */

  function transformDynamicData () {

    var dataProvider = document.querySelector('#' + elementId_.gpaDataProvider);

    dataProvider.addDataTransformer(function(dynamicData) {

        var itemAttributes = ['name1', 'name2','name3','price', 'description',];

        var headlineAttributes = ['txt', 'cta', 'disclaimer'];

      var item = dynamicData.Product[0];

      var nameValues = item.name.split('|');

      if(nameValues.length > 1) {

        item.name1 = nameValues[0];

        item.name2 = nameValues[1];

        item.name3 = nameValues[2];

        item.name4 = nameValues[3];

      } else {

        item.name1 = item.name

        item.name2 = item.name

      }

      console.log("item data on handleDomContentLoaded: ", item);

        /**

        * Convert Japanese fullspace to ASCII halfspace.

        */

        if(dynamicData.Product){

          for (var i = 0, l = dynamicData.Product.length; i < l; i++) {

            convertFullspaceToHalfspace(dynamicData.Product[i], itemAttributes);

            priceFormat(dynamicData.Product[i]);

          }

        }

        // Convert headline attributes:

        convertFullspaceToHalfspace(dynamicData.Headline, headlineAttributes);  

    });

  }

TO: ??????

Thanks!

[Kent Myers]

Is your layout using the swipegallery component to show multiple items from your feed, or showing only one single item?

[Camilo Armando]

No, I'm not using the swipegallery component. 

I only need to show one item/flight at a time, but the item/flight varies depending on what the user searches for on the website.

[Kent Myers]

Great, in that case try the code below... I removed the Japanese fullspace functions assuming you're not using them, and added comments showing how the 5 name values map to your sample feed item. It's not bullet-proof so best results will be to ensure your feed items follow the exact format of "name1|name2|name3|name4|name5"

 /*

  * Custom transform dynamic data for data validation.

  */

  function transformDynamicData () {

    var dataProvider = document.querySelector('#' + elementId_.gpaDataProvider);

    dataProvider.addDataTransformer(function(dynamicData) {

      var itemAttributes = ['name1', 'name2','name3','name4','name5',];

      var item = dynamicData.Product[0];

      var nameValues = item.name.split('|');

      if(nameValues.length > 1) {

        item.name1 = nameValues[0]; // Las Vegas Flights

        item.name2 = nameValues[1]; // Las Vegas

        item.name3 = nameValues[2]; // LAS

        item.name4 = nameValues[3]; // Origin ID

        item.name5 = nameValues[4]; // Origin City

      } else {

        item.name1 = item.name

        item.name2 = item.name

      }

      console.log("item data on handleDomContentLoaded: ", item);  

    });

  }

Hope that helps,

[Camilo Armando]

Ok, great, thanks. I made the code change to custom.js and it's working. Here's the preview of the ad reading the following "mockup" Flight Description for Product 0: "Orlando Flights|Orlando|MCO|Detroit|DTW"

 

http://camiloarmando.com/GWD10

So that's good. But here's the important question: Am I all set to send the HTML file to my client? Will the ad show the user's actual origin city (meaning what the user searches for on the website) instead of the words "Origin City"? 

Meaning, will it say San Francisco, or Los Angeles, instead of the words "Origin City"? 

I ask because the feed's flight description rows will look like this: 

• Orlando Flights|Orlando|MCO|Origin City|Origin ID
  
• Los Angeles Flights|Los Angeles|LAX|Origin City|Origin ID
  
• Las Vegas Flights|Las Vegas|LAS|Origin City|Origin ID
• Etc.

Thanks.

[Kent Myers]

Unfortunately it will show exactly what's in your feed, in other words "Origin City" and not automatically map to whatever value that should be. That's a limitation of this technique and your feed items will need to look exactly like your test file: "Orlando Flights|Orlando|MCO|Detroit|DTW"

[Camilo Armando]

Ok, I guess I can't use this ad template anymore then. So, now that you know and understand what my client is looking for, what Google Web Designer or Adwords template would you recommend?

[Kent Myers]

I don't believe that functionality is available in any template. All Adwords Dynamic Remarketing ads display product information from the feed only.

[Camilo Armando]

Ok, thanks for the information. I may come back later with more questions. Thanks!