In this section of the Beginner’s Guide, we will cover everything that you need to know in order to add dynamic elements to your display ad.
Ads that display content from a dynamic feed can be extremely valuable. These ads are often used for (but not limited to) remarketing campaigns, as they let you display dynamic information such as price, discount value, and the product descriptions that your website visitor is most interested in.
There are two ways to connect an element to a dynamic value. You can either add a new, dynamic element to your ad, or you can make an existing element dynamic. Below, we will explain both options.
Option 1: Adding a new, dynamic element
First, open your ad set in the "single view" and click on the “add element” button in the top left of the scene. In the dropdown menu, click on “dynamic”.
Now, you have to select a "reference" (for example “price”) and an "index" (number).
Option 2: Making an existing element dynamic
Aside from adding a new element, you can also make an existing element "dynamic". For this, you also have to open your ad set in the "single view". Here, you navigate to the "property panel" and click on the “dynamic toggle".
Then, select a "reference" and an "index".
What are references?
The reference describes the "type of dynamic value" you want to display, such as "price" or a product "image". The "index" represents the "relevance of the dynamic item", such as the latest product your website visitor showed any interest in.
Please note that the "references" that are available in the dropdown menu are based on the feed mapping set up. This process takes place when you add your feed to Bannerwise. If you want to learn more about the feed mapping settings, read this article about how to add a feed first.
What is the index?
The "index" is a number that refers to the "line item" of a selected spreadsheet or RSS feed as the "index" of that line. Here, it refers to the feed you have selected when you set up your dynamic display ad.
Features of dynamic elements
When you have added your "dynamic element", it’s easy to improve its layout. For this, we offer three key features:
Scale to fit text
Auto-size buttons
Image scale mode
Below, we will explain the details of these features, and why they are applicable to your dynamic feed.
Scale to fit text
When you use dynamic elements, they often contain text. For example the “price” reference or the “name” reference. When you display text, it is handy to use the “scale to fit text” feature. This makes sure that when your dynamic text is longer, and it doesn’t fit in its container, the font size decreases within a minimum size as set up in the properties. It also works the other way around: it automatically increases the font size if there’s room left in the container and the font size is smaller than the maximum font-size value.
You can find the “scale to fit” toggle in the property panel under the “text tab”. Every text element will automatically scale its font size according to the boundaries set by its container and the minimum and maximum font-size values.
Auto-size buttons
Buttons can also contain dynamic text. Therefore, there’s a feature available in this section for buttons that allow you to set minimum and maximum values of the width and height of a button element. It’s called “auto-size buttons”. With this toggled on, your button will automatically scale up or down depending on the size of your text, for example when you have a bigger or smaller price tag.
In order to set up auto-size for buttons, you have to navigate to the “single view” and select a button element. Then, you go to the “property panel” and click on the “arrange tab”. From this section, you toggle on “auto-sizing”. Now that you’ve toggled on the auto-sizing toggle the properties will appear.
By default the “width only” option is selected in the auto-sizing dropdown. You can now set a minimum and maximum width value. This means that the button will only resize itself along the x-axis. Once you’ve done that, the button will resize between those boundaries based on the text length of the button label.
Image scale mode
When you add dynamic elements, you often want to show images too. For example products or services that you want to sell to your customers. When you use dynamic images, you are more likely to want to show them as a whole, without distorting or stretching the image. That’s why we, by default, select the “scale to fit” mode when adding a dynamic image element.
It’s not the only scale option though. You can also decide to choose “scale to stretch” or “scale to fill”. These options stretch the image to fit its container exactly (stretch) or make sure the image always fills its container without distorting the image scale ratio (fill).
Great! Now that you understand how to work with dynamic elements, it’s time to look into ways on how to edit them. For this, continue to our Beginner’s Guide section: Replacing dynamic elements in your display ads.