Creative Best Practices for Innovid's GWD Composer

Description: Innovid's Google Web Designer (GWD) Composer allows designers and developers to create highly relevant customer experiences quickly and easily. With this integration, ads built in GWD can seamlessly run on Innovid's platform. Below we've consolidated some best practices and tips to make the ad authoring process as smooth as possible.

---

Basics

Naming Dynamic Content

Each dynamic text or image element must have a unique ID. This ID must start with “iv_”. For example, a dynamic background image could use the name: “iv_background_image”.

👇🏼How to Set IDs for Dynamic Elements👇🏼

Dynamic Text

👇🏼How to Create Dynamic Texts in Google Web Designer👇🏼

For dynamic text, click and drag the Text tool to create a dynamic text box of the required size. To confirm the intended text box was set up correctly, check the text box’s width and height are not 0.

All dynamic text boxes must have the “Reduce text size to fit container” checkbox selected so that no versions' text runs outside the box's boundaries. Text box boundaries determine the size of the dynamic text within it. The longer the character count, the smaller the font, and vice versa.

\

For example:

1. First, let's add some sample text in a text box with a width of 500px.
   

2. If we reduce the width of that text box, we see that the text will extend beyond the box's boundaries.
   
3. However, if we check the “Reduce text size to fit container” property on GWD and adjust the height and width of our text box, the text will reduce its size as necessary so that it never extends beyond the box's boundaries.
   

Dynamic Images

👇🏼How to Import and Scale Images in Google Web Designer👇🏼

When working with dynamic images, the scaling value in the property panel can be used to control resizing behavior when assets are pulled into a placeholder element from a feed. Below are the two most common examples used.

• “Crop image to fill”: This adjustment is used for background images such as a pattern, stock image, solid color, etc. The image will be resized to completely fill the placeholder's size, cropping the asset as needed to fit the placeholder's aspect ratio. 

• “Resize image to fit”: This adjustment will make an image resize to fit the placeholder's boundary box but will not cause the aspect ratio of the image asset to change.
  

Animation

We recommend setting up the width and height of text boxes and images before animating them. If you change the width, height, or font size of a text box after animating it, the “Reduce text size to fit container” adjustment will not work. A way to check this is to look in the CSS panel if the transformations (animations) have a “font-size” or a width/height like in the example below:

This will work	This won't work

 

Click-Through

👇🏼How to Set Up the Click - Thru👇🏼

Setting up Click-throughs

DCO display banners must be set up to make the entire ad area clickable. This means a click on the ad must either redirect to a landing page or activate a function within the banner in case of interactive ads (rich media). Units must always include a clickthrough link to a landing page but can either feature single or multiple click-through effects:

Single Click-through:

This is the most common use case for display. You don't need to do anything other than add the Innovid GWD Composer component to your creative as usual. Then upload the creative to Innovid’s platform and connect it to the data feed. With this method, the Innovid GWD Composer component automatically does all the work for you. It creates a layer on top of the entire ad surface that works as a clickable area and maps it to the mandatory “Version Click-Through URL” column of the feed.

If that column is empty, it will automatically source the URL from the campaign’s clicks & tracking tab on Innovid’s platform.

Multiple Click-throughs / Interactive Banners

A banner that includes multiple click-throughs is one that redirects to different landing pages depending on which part of the ad the user clicks on.

An interactive banner (rich media) is when an ad allows the viewers to engage directly within the ad experience (gallery navigation, mouse-over effects, etc).

In both these use cases, you don't want the Innovid GWD Composer component to automatically create a clickable-area layer on top of the entire ad surface, as this would disable the ability to interact with other clickable/tap areas below it. Instead, you need all these interactive layers to be on top so the viewer can interact with them.

Follow the steps:

1. Select the Innovid GWD Composer layer on GWD, go to the properties panel, and turn Enable Interactions on by selecting the checkbox.

2. If the banner includes only one click-through URL, add a tap area that covers the entire creative surface.

If the banner includes multiple click-through URLs, add as many tap areas as needed with their different sizes and positions while ensuring no space in the total banner area is left uncovered. 

To add tap areas, go to the Components panel, click on the tap-area element from the list, and drag it into the stage. Then, edit its size and position from the properties panel.

3. Add a new event by selecting the Add event button at the bottom of the Events panel.

4. This will pop up an event window.

1. From this window, select the Tap Area component as the target.
2. Next, choose the event by clicking on the Tap Area dropdown. Select the “Touch/Click” option for mobile and desktop ads.
3. From the list of actions, click on Innovid 0.5.6 (or the newest version), select “ClickThru“. As the receiver, select the tap area ID that you want to use.
4. Configure the action by filling out the first field, “Label of the clickthru“ with a value that corresponds to the URL’s column in the feed:
   1. If the banner only includes one click-through URL, you can use “main_click” as the value.
   2. If the banner includes multiple Click-through URLs, use a more personalized value so you can then identify each of them better (e.g., iv_link_product1, iv_link_category, iv_link_terms, etc). Important: All values must be included as dynamic columns in the feed.

Create the rest of the interactive events for the elements/layers needed, ensuring these interactive layers are on top of any click-through tap area layers.

Learn more about how to create events in this article.

Banner With A Gallery That Includes Different Click-throughs Per Frame

A typical interactive example is an ad that displays a rotating swipeable gallery of products, where each product has its own click-through link. The way to set this up is by adding events to the gallery component: 

1. Select the Innovid GWD Composer layer on GWD, go to the properties panel, and turn Enable Interactions on by selecting the checkbox:

2. Select the gallery, go to the properties panel’s advanced properties, and uncheck “Disable Swipe. “

3. Select the gallery component layer and add a new event by selecting the Add event button at the bottom of the Events panel. 

4. Add a new event by selecting the Add event button at the bottom of the Events panel.  An even window is displayed.

1.  Select the Gallery component as the target (its default id is gwd-sipegallery_1).
2. To choose the event, select the Swipeable Gallery dropdown and select the “Frame Tap” option.
3. From the list of actions, click on Innovid 0.6.1 (or the newest version), select “ClickThru“ as the receiver, and select innovid-gwd-connector_1.
4. To set up the mapping for each clickthrough in the gallery, there are two options:

Option 1: For label using numbers, enter the base label in the Label input (for example  “Link_” ) and the following code in the Evaluated code input: event.currentTarget.currentIndex

This will result in the following labels to trigger on click: iv_link_1, iv_link_2, iv_link_3, etc. depending on which gallery frame you are on.

Important: All values must be included as dynamic columns in the feed.

Option 2: For customized labels on each frame, leave the Label input empty, and in the Evaluated code input, enter the following code:
["first_label", "second_label", "third_label"][event.currentTarget.currentIndex-1]

This will result in the first gallery frame triggering first_label, the second one triggering second_label, etc. Note these labels are just an example. Replace them with the actual labels from the columns you need.

Important: All values must be included as dynamic columns in the feed.

 

Groups

👇🏼How to Create Wraps and Groups in Google Web Designer👇🏼

 

---

Advanced

Dynamic Number of Frames

When working with dynamic creative, sometimes you need to have a different number of animated frame instances depending on the creative version. We call this functionality “Dynamic Number of Frames”. Common use cases include using different amounts of text for messaging in each version or when you might need to display a pricing option in some versions but skip over it in others. 

👇🏼 How to Animate Keyframes and Transitions in Google Web Designer 👇🏼

Mapping The Feed

To use this feature, let’s create a column in the feed that determines the number of frames for each version.

1. Add a column in the feed and name it according to the convention for dynamic elements, for example “iv_frames”. You will use it to determine the amount of frames displayed in each version. 
2. For each version, fill this column with the number of frames required. For example:

Note: This column must be mapped in the feed and linked in CMT before working in GWD.

 

Setting Up The GWD Project

Once you have that column mapped in CMT, open the GWD project. Design and animate the banner, including all the frames it could display.  Then, at the end of the animation of each frame on the timeline, create an event. So let’s say that your banner has 5 frames, and you will have 4 events on your banner (there is no need to create an event at the end of the last frame since the animation will finish there anyway).

Event 1 to stop the animation once the first frame finishes

Event 2 to stop the animation once the second frame finishes

Event 3 to stop the animation once the third frame finishes

Event 4 to stop the animation once the fourth frame finishes

To create an event:

1. Right-click the “Events” track at the top of the timeline where you want to add the event marker (you can also drag it to a new location on the timeline after you've created it) and select “Add Event” from the pop-up menu.

2. Double-click on the event mark and select “Custom.”

3. Select “Add custom action.”

4. Create a name for the function, something simple and easy to identify. In the code, you should use the following code logic:

This function compares the data from the column “iv_frames” in the feed and if the value is equal to 1 it pauses the animation.

if (IVD.feed['iv_frames'] == 1) {

  gwd.actions.timeline.pause('page1');

}

5. Repeat the operation creating new events at the end of each animation instance. But replace the value after == by the number of frames as set in the iv_frames column in each case.

 

Adding Other Actions

You can also apply other actions to these events. For example, if you have a banner ad with 4 frames and an end frame. In that case, you can create an action named end_frame in the timeline where the 5th frame’s animation starts, and for each frame, instead of setting a pause event, create a gotoAndPlay event. The code will look something like this.

if (IVD.feed['iv_frames'] == 1) {

gwd.actions.timeline.gotoAndPlay('page1','end_frame');

}

In this example, if you create the event when frame 1’s animation finishes, it will jump to frame 5’s animation (or wherever you place the label end_frame).

Adding Dynamic Number of Frames in a Gallery

1. In the GWD file, open the code view window and scroll to the end.
2. Locate the following function:
   

   function handleDomContentLoaded(event) {
    } 

3. Copy the following code:
   

   // Start the Ad lifecycle.        
   requestAnimationFrame(function() {
             setTimeout(function() {
               gwdAd.initAd();
               initDynamicFrames();
               
               function initDynamicFrames() {
             let slidesQty = IVD.feed['iv_frames'];
   
             for (let i = 1; i <= 3; i++) {
               let divElement = document.getElementById('Group' + i + '_1');
               if (i > slidesQty) {
                 divElement.remove();
                 continue;
               }
             }
   
             if (slidesQty == '1') {
               document.getElementById('gwd-gallerynavigation_1').style.display = 'none';
               document.getElementById('arrow_prev').style.display = 'none';
               document.getElementById('arrow_next').style.display = 'none';
             }
           }
   
         }, 1);
       });

   
   
4. Paste the code into the 'function handleDomContentLoaded(event) { }' , so it looks like this:
   
   
   
   Note: The code in the red box is the code copied in step 2.