Skip to content
Toposort Logo
banners

GTM banners

We provide a low code Google tag manager low code integration for Topsort banners. In the following documentation will be explained the requisites and a step by step guide.

Requisites

  1. 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) -->

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

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

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

    New tag

  4. Choose Tag Type: Select ‘Custom HTML Tag’ from the list of tag types.

    Choose tag

  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, or click here.

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

    Set triggering

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

    Save and preview

  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.