Google Tag Manager (GTM)

You can use Google Tag Manager to inject our banner ads script in your platform. Check the Banner JS documentation for more details.

Prerequisites

Access to Google Tag Manager

You need to have a Google Tag Manager account and access to the GTM container for the website where you want to add the HTML.

Google Tag Manager installed on your website

Copy the code below and paste it onto every page of your website.Paste this code as high in the <head> of the page as possible (setting your GTM key):

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Paste this code immediately after the opening <body> tag (setting your GTM key):

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Create a div with the desired dimension on your site

You need to have a <topsort-banner> tag in the HTML with the height and width of the slot you want to display.

<body>
  <topsort-banner
    width="600"
    height="400"
    id="<your slot id>"
    category-id="<category id>"
  ></topsort-banner>
</body>

On Google Tag Manager

Open your Google Tag Manager dashboard.

Select a Workspace

Click on ‘Current Workspace’ from the sidebar and then select another one if needed.

Create a New Tag

Click on ‘Tags’ from the sidebar and then ‘New’.

Choose Tag Type

Select ‘Custom HTML Tag’ from the list of tag types.

Add Your HTML

Enter your custom HTML code into the HTML text box. The code must include your topsort Marketplace API Key. To get a new token go to app.topsort.com → Settings → API Integration.

<script>
  // Set API key for auctions and events
  window.TS = {
    token: "your topsort token",
  };
  // Custom behavior can be configured for each site.
  window.TS_BANNERS = {
    // handle the destination link
    getLink: function(banner) {
      switch (banner.type) {
        case "url":
          return banner.id;
        default:
          return `https://example.com/${banner.id}`;
      }
    },
  };
</script>
<script>
(function() {
    var bannersScript = document.createElement('script');
    bannersScript.src = 'https://unpkg.com/@topsort/banners@0.2.0/dist/banners.mjs';
    bannersScript.type = 'module';
    bannersScript.async = true;

    bannersScript.addEventListener('load', function() {
      window.dataLayer.push({
        event: 'topsort-banners-loaded'
      });
    });

    var analyticsScript = document.createElement('script');
    analyticsScript.src = 'https://unpkg.com/@topsort/analytics.js';
    analyticsScript.type = 'module';
    analyticsScript.async = true;

    analyticsScript.addEventListener('load', function() {
      window.dataLayer.push({
        event: 'topsort-analytics-loaded'
      });
    });

    document.head.appendChild(bannersScript);
    document.head.appendChild(analyticsScript);
  })()
</script>

Set Triggering

Choose a trigger to determine when the HTML should be executed (e.g., Page View, Click, etc.).

Save and Preview

Save your tag and use the ‘Preview’ mode to test the functionality of your HTML on your site.

Verify

Check that the site is showing the banners, that the events are being reported correctly and that the opaqueUserId changes when using different browsers.

Publish

Once verified, publish the changes to make the HTML live on your website.

Overview

Ad Platform

Ad Server

Toppie

Advanced Integrations

API

Prerequisites

On Google Tag Manager

​Prerequisites

​On Google Tag Manager

Prerequisites

On Google Tag Manager