Google Ads dynamic ad functionality

The Google Ads dynamic ad templates include JavaScript and CSS files. These files provide base code, the required and optional JavaScript and CSS to help build your creatives.

Base code files

You can find the base code files in your creative's common subfolder.

  • Common code - Default functionality which applies to all templates.
    • utils.js - Utilities to help with commonly used functionality.
    • common.js - Required functionality.
    • common.css - Commonly used CSS classes.
  • Custom code Add any custom functionality here.
    • custom.js - Custom functionality you need to apply to all ad sizes.
    • custom.css - Custom styling, transitions, and other CSS you need to apply to all ad sizes.

Common code (default functionality)

The common code includes a default set of functions specific to Google Ads dynamic remarketing ads:

  • Exits
    • exitToItem
    • exitToDefault
  • Swipeable Gallery events (for templates using the Swipeable Gallery component)
    • galleryFrameShown
    • galleryFrameActivated
    • galleryAllFramesViewed
  • Mouse interaction events
    • itemMouseover
    • itemMouseout

These functions are available in the Event dialog when you edit or add an event. When selecting an action, expand the Custom section to see a list of the actions enabled by the common code, along with any new custom actions you've created.

The functionality for these event handlers is defined in JavaScript functions of the same names in the common.js file.

Custom code (custom functionality)

If you want to add custom functionality to any of the exits or Swipeable Gallery events included in the common code (see above), follow these steps:

  1. Create a new function in the custom.js file. (This requires knowledge of JavaScript.)
  2. In Google Web Designer, configure an event that uses one of the functions included in the common code.
  3. In the Custom Code box, add a call to the new function and prefix its name with custom. (e.g., custom.functionName).

Mouse interaction events

The itemMouseOver and itemMouseOut functions are the only functions in the common code that also call the same function in the custom code. As long as your function in the custom.js file is named itemMouseOver or itemMouseOut, you don't need to follow Steps 2 and 3 above.

Example

In this example, you create a function to highlight a special offer when each frame of a Swipeable Gallery is shown.

  1. Create a new function named highlightSpecialOffer in the custom.js file.
  2. Add an event to the Swipeable Gallery.
    1. For the event, select Swipeable Gallery > Frame shown.
    2. For the action, select gwd.GalleryFrameShown.
  3. In the Custom Code box, add a call to custom.highlightSpecialOffer, as seen below:

After adding these functions in the Event dialog, you can find them in Code view in the event handlers section:

<script type="text/javascript" gwd-events="handlers">
/* custom event handlers */
gwd.galleryFrameShown = function(event) {
  common.galleryFrameShown(event);
  custom.highlightSpecialOffer();
};

...

Was this helpful?
How can we improve it?