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:

Api Access should be enabled in your Google AdManager account settings:

Publish your schedule placeholders directly to Google Ad Manager using the Direct integration option.

Api Access should be enabled in your Google AdManager account settings:

Publish your out-of-page advanced banners (interstitial, sticky, pushdown, bestfit) directly to Google Ad Manager using the Direct integration option.

Api Access should be enabled in your Google AdManager account settings:

Publish your banners directly to Google Ad Manager using the Direct integration option

Create new banner(s) and click the “Publish” tab.

In the Publish modal you will see the banner sizes you’ve chosen to publish.

Click Next button to move to the next step.

Select the “Google Ad Manager/ Doubleclick For Publishers [DFP]” Ad network.

Copy the Ad Tag (Embed Code). If you have multiple banner sizes copy embed codes one by one for each size.

In Google Ad Manager go to Delivery->Creatives and click “New Creative”

Select Advertiser and click on “Third party” creative format

Select ad unit size that corresponds to your banner (ex 728×90).

Paste the Ad Tag (Embed Code) that you have copied from Bannernow.

When copying embed code – make sure that quotes ” ” are not modified (for example if you will send this embed code to somebody via email – email client can display quotes in different format “ ” which will cause problems with displaying your banner).

Click Save and preview your banner. If banner preview is not working it could be because of wrong quotes format (“ ” instead of ” “) in embed code or because of the Safe Frame.

Create a new “Advanced Format” banner (Interstitial, Sticky, Pushdown, …) and click the “Publish” tab.

Select the “Google Ad Manager/ Doubleclick For Publishers [DFP]” Ad network.

Copy the Ad Tag (Embed Code)

In Google Ad Manager go to Delivery->Creatives and click “New Creative”

Select Advertiser and click on “Custom” creative format

Select “Out-of-page (Interstitial)” ad unit size.

Paste the Ad Tag (Embed Code) that you have copied from Bannernow.

Uncheck the Safe Frame option. Otherwise you will need to add a JavaScript code to your Google Ad Manager templates to communicate the Window resize event to the banner (please contact us at contact@bannernow.com) if you need any help with that.

When copying embed code – make sure that quotes are not modified (for example if you will send this embed code to somebody via email – email client can display quotes in different format which will cause problems with displaying your banner).

Click Save and preview your banner. If banner preview is not working it could be because of wrong quotes format (“ ” instead of ” “) in embed code or because of the Safe Frame.

The next steps will describe how to add “Out of page” creatives to your website. If you already know this please skip the following steps.

Go to Inventory->Ad Units and click “New Ad Unit”

Select “Out of page” type size.

Uncheck “AdSense” (Maximize revenue of unsold inventory with AdSense) if you don’t want to show ads from Google Ad Exchange network in your Out of page ad container/unit.

Click SAVE to save the Ad Unit.

Now go back to Ad Units page (Refresh the page if you don’t see newly created Ad unit). Click on the newly created Ad Unit.

Open “Tags” tab. Select “Google Publisher Tag” and click Continue.

Enable “Out-of-page” creative. Click Next.

Copy the codes to your website. Header code initializes out of page creative.

Document body code creates a container where the banner will be placed.

*If you already have the gpt.js script library embeded into your website header – paste the document header code without it.

Now your webiste is ready to display Out of page creatives.

You can create an Order with Line item the same way you do for other display ads sizes:

Select the out-of-page Ad Unit size that you have just created (it’s where your creatives will be displayed for this order/line item).

Assign creatives to your order line item (select existing creative that you have added in the first part of this tutorial):

Approve the order and the Advanced out-of-page banners will start displaying on your website

Start the order and the “Out-of-page” Advanced formats will start displaying on your website.