ad-platform

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.

Requisites

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>" //optional
  ></topsort-banner>
</body>

On Google Tag Manager

Log in to GTM: 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.