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

​
Prerequisites

1

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.
2

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) -->
3

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

1

Log in to GTM

Open your Google Tag Manager dashboard.
2

Select a Workspace

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

Create a New Tag

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

Choose Tag Type

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

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>
6

Set Triggering

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

Save and Preview

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

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.
9

Publish

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