Bannerflow banners can be exported to, and used with DoubleClick Studio.

Design and animate your banners in Bannerflow and connect with your Dynamic Content / Profile from Studio.

Step by step guide

1. Create new Profile in DoubleClick Studio

Start by creating a new Dynamic Content > Profile in DoubleClick Studio. This will open a step-by-step guide.
https://www.google.com/doubleclick/studio/#ContentManagement:

A Profile in DoubleClick Studio is a essentially a Google Sheet that holds all dynamic messages for your different segments/triggers, to be used by your banner(s).

Video tutorial on how to create new Profile:
https://support.google.com/richmedia/answer/4387189

Make sure that your Google Sheet is shared with the following two email addresses: StudionDynamicCreative@system.gserviceaccount.com

studio-dynamic-creatives@google.com

At step 4 (Generate code) in the wizard an HTML5 code will be generated. Copy this code and save in a text file (or go back and grab it later). This code will be used when exporting your Bannerflow banner to Studio.

Sample code:

<!--

 * Dynamic Content Enable code for Profile: 12345678

 *

 * The following code initializes the following dynamic variables for

 * development testing and live serving of Fields associated to the above profile

-->

<!-- DynamicContent Start: HTML5 invocation code. -->

<script type="text/javascript">

// Dynamic Content variables and sample values

    Enabler.setProfileId(12345678);

    var devDynamicContent = {};

    devDynamicContent.DDC_Studio_Feed_Sheet1= [{}];

    devDynamicContent.DDC_Studio_Feed_Sheet1[0]._id = 0;

    devDynamicContent.DDC_Studio_Feed_Sheet1[0].Unique_ID = 1;

    devDynamicContent.DDC_Studio_Feed_Sheet1[0].Reporting_Label = "Dynamic-Message-1";

    devDynamicContent.DDC_Studio_Feed_Sheet1[0].Headline = "Get 20% discount on your first purchase.";

    devDynamicContent.DDC_Studio_Feed_Sheet1[0].Button = "Read more";

    devDynamicContent.DDC_Studio_Feed_Sheet1[0].Exit_URL = {};

    devDynamicContent.DDC_Studio_Feed_Sheet1[0].Exit_URL.Url = "https://www.mysite.com";

    devDynamicContent.DDC_Studio_Feed_Sheet1[0].Default = false;

    devDynamicContent.DDC_Studio_Feed_Sheet1[0].Active = true;

    Enabler.setDevDynamicContent(devDynamicContent);

</script>

<!--

 * You may access the variables in the following manner

 * AFTER the Studio Enabler is initialized.

 * var Unique_ID = dynamicContent.DDC_Studio_Feed_Sheet1[0].Unique_ID;

 * Note: be sure to use "dynamicContent", not "devDynamicContent"

 * Note: be sure to use ExitOverride to create your exit URL dynamically; follow the instructions on our Help center: https://support.google.com/richmedia/answer/2664807

-->

2. Create banner in Bannerflow

Create a new banner-set and design your banner(s). Now, instead of writing the wanted text and button translations directly in Bannerflow, use the Profile spreadsheet’s column names.

Suppose we have a spreadsheet with the columns Headline, Sub-headline and Button. We can then instruct our banner to use these dynamic messages from the spreadsheet by entering the wanted column’s name within hashtags. E.g. #Headline#

To make it easier to see the banner design in Bannerflow with more real texts, one can add a dummy text after the column name separated with a colon. This text will be shown when previewing the banner within Bannerflow. E.g. #Headline:Free shipping on your first order#

Use of custom 𝐅onts 

If using custom, self-uploaded fonts in your banner, you need to make sure to include all characters needed. The reason is that the Double Click Studio content is dynamic and Bannerflow are optimising all font. So we need to optimise font but also include all characters.

Drag in a text box and place it any where on the timeline and outside the banner canvas. Add all characters to that text box. You can copy and paste below:
A a; B b; C c; D d; E e; F f; G g; H h; I i; J j; K k; L l; M m; N n; O o; P p; Q q; R r; S s; T t; U u; V v; W w; X x; Y y; Z zÅ,å,Ä,ä,Ö,ö Å,å,Æ,æ,Ø,ø(Ä/ä, Ö/ö, Ü/ü)ß &!@£$%^&*()_;".?/ $€$£1234567890'

Also make sure this text box is using the same font you use in the banner. If your banner is using more fonts or font weights, just make sure you have one of these text boxes with all characters for each font. 

Multi-feed profiles

In some cases, using dynamic data from multiple feeds/sheets can be relevant. When using multiple sheets, reference your text fields and buttons, in Bannerflow, to your profile by adding the feed’s index as prefix to your values.

E.g. your profile contains two feeds/sheets and the first feed/sheet contains the Headline value - reference it by using #Feed1.Headline#.

3. Export banner(s) as DoubleClick Studio-ready ZIP file

When banner is ready, it can be exported as a Studio-ready ZIP file from Bannerflow. Start by copying the banner-set’s Showcase link. E.g. https://app.bannerflow.com/p/Hmq60C

Browse to this banner export page 🔗 and follow the three steps in the screenshot below.

4. Upload banner to DoubleClick Studio

Banners are uploaded to DoubleClick Studio on the Creatives tab, via the New creative > From files option.

Name the creative/banner and choose Advertiser and Campaign to associate the new banner with.

👉 Please note:  that if the exported banner-set contains more than one banner, the ZIP file must be extracted on your computer before uploading to DoubleClick studio. The extracted ZIP file will contain one ZIP file per banner. These ZIP files can be bulk uploaded to DoubleClick Studio.

Good to know

  • Once a Bannerflow banner is exported to Studio, design and text updates can be made in Bannerflow and is automatically updated in Studio
  • The manual procedure uploading the banners is required due to DoubleClick Studio lacking an API. We hope to see an API being released by Studio in the near future.
  • Bannerflow feeds can be used with Studio banners, same way as done today.
  • Dynamic images in Studio are supported in Bannerflow banners by the use of “Dynamic image” widget.
  • Multi-feed profile’s are supported by using macros in this format; e.g. #Feed1.Headline#
  • Multi-row/array values - commonly used to show product carousels in banner - are supported by defining the wanted row (index) in the macro; e.g. #Feed2.Row3.ProductImage#
Did this answer your question?