GTM (Google Tag Manager)

❗️

IMPORTANT

Google Tag Manager can serve as a convenient way to test-drive a Taboola integration , without any development. However, it is not recommended as a long-term solution.

Whenever possible, consider using an alternative method - e.g. standard integration (aka JS Tag integration).

Supported browsers

🚧

Taboola's integration is supported for any browser that is fully compatible with ES5 (ECMAScript 5) or higher. This includes all modern web browsers.

Older browsers (such as IE 11) may encounter problems with video ads.

Basic Flow - Add a single tag

📘

This section describes how to add a single tag (and trigger) for Taboola.

If you have different Taboola code snippets for different devices, then see below:

Complex flow - Add a tag for each device type.

🚧

Your Google Tag Manager version might differ from the one described here.

For support with Google Tag Manager, refer to Google's official documentation.

Set up the tag

1. Open Google Tag Manager.

2. In the Container Name column (left), click on the relevant container.

3. If you use multiple workspaces, choose a CURRENT WORKSPACE (top, left):

   

4. In the navigation panel (left), select Tags:

   

5. Click on New (top, right):

   

6. The default name (top, left) for the new tag is Untitled Tag.

   Rename it to something more descriptive.

   Tip: Consider using the same name as the placement param provided by Taboola. (For information about params, see Advanced Options.)

7. Click on the Tag Configuration card, and select Custom HTML from the options provided.

8. Paste in the code snippet provided to you by Taboola.

   To create/edit the code snippet yourself, see Advanced Options.

9. Click on the Triggering card (below the code snippet field), and configure a trigger for this tag.

   E.g. All pages > Page View.

10. Click on Save (top, right).

🚧

Do not add multiple GTM tags (with the same trigger) for the same page. Doing so will prevent Taboola recommendations from displaying.

Test and deploy

1. To test drive your latest changes (without actually deploying them):
   1. Select the new tag from the list, using the checkbox provided.
   2. Click on Preview (top, right) - and follow the prompts provided by Tag Assistant. Your website will be loaded in debug mode.
2. Once you are ready to deploy, return to the Tag Manager workspace and:
   1. Select the new tag, using the checkbox provided (on the left).
   2. Click on Submit (top, right) - and follow the prompts.

What's Next?

1. For a more advanced flow, see the next section.
2. In order to provide personalized recommendations for impressions in the EU and California, make sure to implement GDPR and CCPA consent.
3. If you have not already done so, configure ads.txt.
4. To create/edit a Taboola code snippet yourself, see Advanced Options.
5. Contact Taboola so that we can verify your Taboola integration.

Complex flow - Add a tag for each device type

Sometimes, you may want a separate tag and trigger within Google Tag Manager for each device type. For example, if you have separate Taboola code snippets for desktop and mobile.

This section describes one possible approach.

📘

General flow

Using Google Tag Manager:

1. Create a user-defined variable that returns the device type:"desktop", "tablet" or "mobile".
2. Create a separate tag for each device type, each with it's own device-specific Taboola code snippet.
3. Using your user-defined variable, configure a separate trigger for each tag.

🚧

Your Google Tag Manager version might differ from the one described here.

For support with Google Tag Manager, refer to Google's official documentation.

Step I - Create a user-defined variable

1. Open Google Tag Manager and select the relevant workspace.
2. In the navigation panel (left), select Variables. Then click on the New button (top, right).
3. At the top of the window provided, fill in a name for the new user-defined variable.

   E.g. Screen Type.

4. Click on the Variable Configuration card, and select Custom JavaScript from the options provided.
5. Paste the following code snippet into the field provided:

function () {
  var width = window.innerWidth;
  var screenType;
  if (width <= 520) {
    screenType = "mobile";
  } else if (width <= 820) {
    screenType = "tablet";
  } else {
    screenType = "desktop";
  }
  // console.log("screenType: " + screenType);
  return screenType;
}

6. Click on Save (top, right).

Step II - Create a trigger for each device type

1. Open Google Tag Manager and select the relevant workspace.
2. In the navigation panel (left), select Triggers. Then click on the New button (top, right).
3. At the top of the window provided, fill in a name for the new trigger.

   E.g. Desktop Device (or Tablet Device or Mobile Device).

4. Click on the Trigger Configuration card, and select Some Page Views. Then fill in the fields provided:
   1. In the first field, select your user-defined variable - e.g. Screen Type.
   2. In the second field, select equals.
   3. In the third field, type desktop (or tablet or mobile)

Step III - Create a tag for each device type

For each device type (desktop, tablet and mobile), perform the following steps:

📘

Repeat these steps for eachdevice type.

1. Open Google Tag Manager and select the relevant workspace.
2. In the navigation panel (left), select Tags. Then click on the New button (top, right) - or edit an existing tag.
3. At the top of the window provided, fill in a name for this tag.

   E.g. <<placementName>> - Desktop (or <<placementName>> - Tablet or <<placementName>> - Mobile)

4. Click on the Tag Configuration card, and select Custom HTML from the options provided.
5. Paste in the device-specific code snippet provided to you by Taboola.

   To create/edit the code snippet yourself, see Advanced Options.

6. Click on the Triggering card (below the code snippet field), and configure a trigger for this tag.

   E.g. Desktop Device (or Tablet Device or Mobile Device`).

7. Click on Save (top, right).

📘

After repeating the above steps for each device type, you should now have 3 tags - 1 tag per device type.

Step IV - Test and deploy

1. To test drive your latest changes (without actually deploying them):
   1. Select the new tag(s) within the list, using the checkboxes provided.
   2. Click on Preview (top, right) - and follow the prompts provided by Tag Assistant. Your website will be loaded in debug mode.
2. To test different screen sizes:
   1. Open Chrome Dev Tools and activate the device toolbar (top, left in the Dev Tools pane):
   2. Select the desired device (above the preview pane) and reload the page.
3. Once you are ready to deploy, return to the Tag Manager workspace and:
   1. Select the new tag(s) within the list, using the checkboxes provided.
   2. Click on Submit (top, right) - and follow the prompts.

What's Next?

1. In order to provide personalized recommendations for impressions in the EU and California, make sure to implement GDPR and CCPA consent.
2. If you have not already done so, configure ads.txt.
3. To create/edit a Taboola code snippet yourself, see Advanced Options.
4. Contact Taboola so that we can verify your Taboola integration.