/ Google AdManager / 0 Comment

Google Ad Manager remarketing HTML5 display ad

In this article, we’ll create a remarketing HTML5 display ad that shows the products a user has previously viewed on your website using Google Ad Manager.

Google Ad Manager remarketing html5 display ads tutorial

We will only use local storage, so there’s no need to worry about third-party cookies being blocked by modern browsers.

Step 1 – Create demo product pages

First, let’s create demo pages for various e-commerce products.

In a real-world scenario, you can integrate this solution into an existing e-commerce website.

Step 2 – JavaScript snippet to store viewed products in user’s browser

Next, add JavaScript code to these product pages to store the product IDs of items users have viewed:

<script>

// retrieve previously viewed products from the browser's Local Storage
var viewedProducts = localStorage.getItem("viewedProducts") || ""; 

//product id on the current page. This value should be dynamically set for each product page.
var currentProductId = "3"; //REPLACE with the Real product id value!

// write previeously viewed products + current product to Local Storage. Comma (,) is used to split product ids 
localStorage.setItem("viewedProducts", viewedProducts + currentProductId + ","); 

</script>

Let’s open the page with Product id 2 and check if the id is stored correctly.

Then let’s open the page with Product id 5

Perfect! Now after opening a product page – it’s id is stored in the browser local storage.

Step 3 – Install Google Ad Manager remarketing AdUnit

Now, include the .setTargeting(“viewedProducts”, localStorage.getItem(“viewedProducts”) || “”); JavaScript code for the Google Ad Manager ad slot:

adSlots[0] = googletag //this is your existing AdUnit/Slot

          .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad-1") //this is your existing AdUnit/Slot

          .addService(googletag.pubads()) //this is your existing AdUnit/Slot

          .setTargeting("viewedProducts", localStorage.getItem("viewedProducts") || ""); //the only code that should be added to an existing AdUnit/Slot is .setTargeting...

If you want to create a new Ad Unit:

Go to Google Ad Manager → Inventory → Ad Units → New Ad Unit

Then add .setTargeting to the newly generated Ad Unit/Slot like in example above and add it on your website in the place where the ad should be displayed.

In this tutorial we’re simply passing all the viewed product ids that we have stored in the Local Storage to the Google Ad Manager Ad Unit/Slot.

Step 4 – Connect product catalogue feed and create HTML5 display ad

Now, we need to design a banner that displays the previously viewed products.

Navigate to Bannernow → Data → Feeds → New Feed

Select the feed format that best suits your website. The options include:

  • Google Spreadsheet can contain information about all the products (up to 1000 products)
  • XML/JSON feed can contain information about all the products (up to 1000 products)
  • BigTable (XML/JSON/CSV) feed can contain information about all the products (up to 100 000 000 products)
  • Product API will return information about the product based on the id in real time (no limits)

For this demo, we’ll use the Product API URL, which returns product information by ID:

https://bannernow.com/demos/tutorials/admanager-remarketing-tutorial/products.json?ids=5,6

When there are no previously viewed products, the banner will display a few random products.

[
  {
    "id": "5",
    "title": "Lenovo Ideapad 3i 15.6",
    "price": "$360.41",
    "image": "https://demo-tutorials.bannernow.com/admanager-remarketing-tutorial/assets/images/products/products/product5.jpg",
    "url": "https://demo-tutorials.bannernow.com/admanager-remarketing-tutorial/product5.html"
  },
  {
    "id": "6",
    "title": "Microsoft Xbox Series X 1TB",
    "price": "$448.00",
    "image": "https://demo-tutorials.bannernow.com/admanager-remarketing-tutorial/assets/images/products/products/product6.jpg",
    "url": "https://demo-tutorials.bannernow.com/admanager-remarketing-tutorial/product6.html"
  }
]

When creating a feed in Bannernow, use %%BN_FEED_ITEM_IDS%% instead of actual product IDs. This approach allows the system to dynamically retrieve information for any product ID.

Select the checkboxes on the left for the data fields you want to include in the display ad itself.

Next, let’s create a banner linked to the product feed:

Banners → New Banner → Bannerset (Check the Dynamic Content option and select your feed)

Create a new size → From Scratch

Let’s add dynamic text and image components to the canvas.

Click Plus button → Dynamic

For this banner we will show 2 products on the same loop.

First product: Start from 1

Second product: Start from 2

Same for the landing page urls (Start from for first and second products)

Then let’s add some basic animation and preview the result:

Step 5 – Generate HTML5 Ad Tag with macros for Google Ad Manager remarketing

Publish banner -> Next, Next -> Google Ad Manager

Input the name of the targeting parameter name (in our case it will be %%PATTERN:viewedProducts%% )

Copy the AdTag

Step 6 – Publish HTML5 ad to Google Ad Manager using ThirdParty tag option

Open Google Ad Manager

Creatives → New Creative → Third Party

Paste the copied AdTag from Bannernow

Now we just need to display this creative in our Ad Unit…

Create a placement, select the Creative, assign it to the Line Items (All the steps that you usually do to display a sponsored ad…).

Step 7

Preview the result:

Preview Display Ad: https://demo-tutorials.bannernow.com/admanager-remarketing-tutorial/banner.html

Clear Local Storage: https://demo-tutorials.bannernow.com/admanager-remarketing-tutorial/clear-local-storage.html

This is just a basic example of how the remarketing can be used in the Google Ad Manager.

Some room for the improvement:

  1. AI product recomendations based on the browsing history
  2. Show products that other users usually bought together with viewed products
  3. Personalized product offers for existing customer
  4. Cross-device remarketing/retargeting
  5. Use audience segments instead of specific product ids
  6. Regargeting using cookies

If you have any specific requirements or questions about how to integrate remarketing/retargeting on your website request a Free consultation with the Bannernow team: https://bannernow.com/request-demo