Prerequisites:

1. a product catalogue in XML, JSON, CSV, or API format
2. the DSP, SSP, or a recommendation system

Here is an example of the product catalog that we will be using in this tutorial. It has the product ID column, product description, product image, landing URL, etc.

Now, let’s create a BigTable connection for our product catalog. The BigTable is used when you have more than 100 products (it can even be used if you have 100 million products in your catalog).

Enter the product catalog URL (in our case, it will be the CSV file that is hosted on a website). Select CSV, refresh once per day (BannerNow will update all the product info daily). In the Advanced Settings, enter the Item Primary Key that matches the product ID column in your product catalog.

Our BigTable connection is now active, and it will automatically update the product data daily

Now, let’s create a Data Feed

Select BigTable as the source

Select the BigTable that we have just created

Select all the fields that will be used in the banner (like price, image, …)

Next, create a banner

Select a Bannerset

Select the Feed that we have just created

Next, bind all the items in your banner to the feed data

In this tutorial, we will be creating a banner that displays 2 different products.
For the first product, we will set Fixed Line to ON and the Row Number = 1

The same for the image, button, description and the landing URL:

And for the second product, simply set the Row Number = 2

Save the Banner and click Preview

In the Preview panel, you can input different product IDs to test the banner.
For example, entering 2,3 will load the products with ID 1 and ID 2 from the BigTable

Then click Publish

Next:

Select the Ad Network (in this tutorial, we’ll be using Google Ad Manager).
If you don’t need any Ad Network simply select the BannerNow from the Ad Networks list

In the Ad Tag generation panel, there is an additional input called Feed Items IDs where you can input the product IDs separated with the comma (,) or use the macros from the Ad Network.

For the Google Ad Manager, this macro will be %%PATTERN:key%% where the key can be replaced with the “product” if you’re targeting products or “segment” if you’re targeting a specific audience segment.
For another Ad Network, it will have a different format.

Next, copy/paste the Ad Tag in the Ad Network (DSP/SSP).
Here is a tutorial for the Google Ad Manager third-party Ad Tag publishing:

For the Google Ad Manager Unit, the setTargeting method needs to be added after addService():

googletag.defineSlot("/1234/adunit1/adunit2", [728, 90], "div-gpt-ad-123456789-0")
.addService(googletag.pubads())
.setTargeting("product", "5,8");

Obviously, the setTargeting method values should be dynamic (usually this is managed by the recommendation system), so simply update the Google Tag JavaScript code to use the product IDs from the recomendation system (or simply read the first-party cookies or the Local Storage where the product IDs that the user visited are stored).

Feel free to contact us if you you need any help with the retargeting setup.

Google Ad Manager step-by-step remarketing integration:

*These dynamic images can be integrated with feeds, ensuring that any feed updates automatically re-render the image.

To publish a banner as a dynamic image and track impressions:

Open the Banner: Select the banner you wish to publish as an image and click the “Publish” button.

Choose the sizes you want to publish and click Next.

Select the Bannernow (Static Image) Ad network.

Choose the image format (JPG, PNG, or Auto/WEBP). Enable the retina option if you require a 2x image size.

After publishing, copy the provided image URL.

You can now use this image URL on any webpage or ad network. For instance, you might create an HTML page with an <img src= /> tag that references the dynamic image generated by BannerNow.

Let’s do a test and reload our web page a few times.

Reloading the webpage multiple times will load the dynamic image accordingly.

o verify impression tracking, access the Reporting dashboard in BannerNow. The report will display the exact number of impressions, corresponding to the number of times the dynamic image was loaded. For example, if you reload the page 7 times, the report should show 7 impressions.

This functionality allows for effective monitoring of your dynamic images performance across various platforms.

1. Let’s create a Real Estate spreadsheet document and use it as a data source for this tutorial. Add a City and Zip code columns to your feed so we can match these values to user’s data later.

2. Publish your Google document to the web ( File->Publish to the web… ).

3. Copy the Google Sheet URL from the browser tab (don’t use the one from the “publish to the web” modal).

4. Add an ID from your google sheet URL to https://gconv.bannernow.com/?id=

Note: If you want to use a specific sheet from your document then add the &sheet=2 (number of the sheet)

https://gconv.bannernow.com/?id=1Y_yMUxJHS00vUvCj1Cvd-ZqP8SMbzSdx44JxKh69OgE&sheet=2

5. This URL can now be used to create a feed on BannerNow. Don’t forget to select “Enable Targeting” checkbox.

6. Select the columns that you want to use in your ads and check “Unify results” checkbox (required for google spreadsheet). You will see the “Products” preview in the panel on the right side.

7. Now let’s add the targeting rules to our feed. Switch to Targeting tab and click “Add New Rule” button.

8. Set rule type to “Include” – means include ONLY results that match targeting rule (all other results/products will be excluded from the feed when ad is loaded).

Then select “City” in the dropdown on the left side, then cast as “String” equals and the second dropdown – attribute(column) from our feed – “city”.

This means that if user loads the Ad on some website and he is from the New York city – the Ad will try to find the product that has the attribute value that matches user’s data (product with city = New York) and all other products will be excluded from the feed.

As a result user will see the Ad with New York city real estate product that matched his geo targeting.

If none of the rules matches user’s data then feed will be not filtered and user will see the first product from the original feed.

Before you can create a feeded banner, you need to create a new feed, which will be used in your bannersets.

Learn how to do this:

Go to the Data > Feeds and click on the Add a New Feed button.

From Select Data Source dialog select JSON.

Fill in all the required input fields:

1. In the “FEED NAME” input the feed’s title.
2. In the “FEED URL” input the feed’s URL (XML or JSON). You”l also be able to use a Google Spreadsheet as a feed source.
3. In the “MAX ROWS” input the limit number of max results/rows.
4. Select the “UPDATE INTERVAL” – an interval that represents how often new data is fetched.
5. Click the Proceed to fields selection, to go to the next step.

 After your feed was parsed, select the data that can be accessed from inside the banner:

• Check the required fields in the left tree panel.
• The fields that you have selected will appear in the central panel (Selected Fields).
• You can use the jsonPath formula (read the documentation) if you need to select some specific data or to convert it into a different format (you can also contact us, we will gladly assist you with this). In this tutorial, we have used the UCASE({$[*].name}) formula to convert the name fields to uppercase strings. For the price_usd field we are using the NUMBER({$[*].price_usd}, ‘$0,0.00’) formula to display the price in the right format.
• You can also create a custom field manually by clicking the +Add Custom Field button.
• For the “img” custom field we will create a formula to help us to create a URL path to the image from the feed: ‘https://bannernow.com/demo/’+{$[*].id}+’.svg‘.
• Within the right panel, you’ll view the results accessible in your banners.

Use Filters:

Click the “Add New Filter” button.

You can manipulate the feed results using the following filter types: Include, Exclude, Replace, Sort, Prioritize, Remove Duplicates, URL Fallback

Here is an example:

1. Input filter title.
2. Select the Sort filter.
3. Select the filtering to sort by price.
4. Field type (string, number, date).
5. Operator (descending price).

Click the “Update/Create Feed” to save it.

Create a new bannerset.

When creating a bannerset, input the title and select the feed source from the dropdown menu. After that, click the create button.

Create a new banner.

You can use a different feed for the translated banners within the same bannerset:

• Click the Settings button in the translation modal
• Select a different feed from the dropdown
• Click the Update button

After adding the feed to your bannerset you can create a new banner (or edit an existing one). To add a feeded source to the item inside the banner, do the following:

• Select the each item
• Click on the green Feed button

Select the field that you want to display. The fixed row slider can be used in case you need to display the data from a specific row only. Click Save  to apply the feed to the item.

It’s also possible to connect the URL from the feed to the banner hyperlinks. To do this, go to canvas settings and set the feeded hyperlink to the whole banner or select an item and enable Hyperlink for it.

Select the field that contains the URL data format and click Save to apply the changes.

Save your banner and click Preview. You will notice that on each loop, the banner is taking the new data from the next row within the feed.

Now, you’re able to publish the banner to the ad network. When the feed data is updated, your banner will always display fresh data.

Showcase Example https://bannernow.com/html5-banner-examples