GuidesCommunity DiscussionAnnouncements
GuidesAnnouncementsCommunity Discussion
GuidesCommunity DiscussionAnnouncementsLog In

GTM Advanced Options

Suggest Edits

❗️

IMPORTANT

Integrating Taboola via Google Tag Manager is not recommended as a long-term solution.

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

Editing Params

This section describes how to create/edit a Taboola code snippet yourself, for Google Tag Manager.

📘

To add the code snippet within Google Tag Manager, see Google Tag Manager (above).

📘

If you received a prefilled code snippet from Taboola, you can copy and paste it into GTM 'as is', without editing any Taboola params.

<script>
  /*
  Using JS, add a <div> container to your page, in the desired location.
  The *sample code* shown below adds a <div> to the *end of the page*. This is a *sample only*.
  
  Taboola modules served via GTM are NOT automatically responsive.
  Style the width of the <div> accordingly - e.g. use a width of 100% for mobile devices.
  */
  var div = document.createElement('div');
  div.id = 'taboola-slot'; // The ID of the <div> container (referenced below).
  div.style.width = '100%'; // Taboola modules served via GTM are NOT automatically responsive.
  document.body.appendChild(div); // This sample code adds a <div> to the *end of the page*.
</script>

<!-- Use YOUR OWN param values, as provided by Taboola -->
<script>
   window._taboola = window._taboola || [];
   _taboola.push({article:'auto', url : top.location.href}); // for a page_type of 'article', use 'article:'auto'

   _taboola.push({
     mode: '<mode>',
     container: 'taboola-slot', // The ID of the <div> container (see above).
     placement: '<placement>',
     target_type: 'mix'
   });
</script>

<!--  Fill in your Publisher ID, as provided by Taboola -->
<script src= '//cdn.taboola.com/libtrc/<publisher-id>/loader.js'></script>

🚧

Make sure to fill in your own param values, as provided by Taboola.

Param/default value

Instructions

Notes

page_type

The relevant page type, as provided by Taboola
- E.g. for article, this line should read: article='auto'

Possible values:

video (video='auto')
article (article='auto')
photo (photo='auto')
search (search='auto')
category (category='auto')
home (home='auto')

The 'auto' directive auto-generates an ID for the page.

mode

Fill in the UI Mode ID for this placement, as provided by Taboola:
- E.g. '<<mode>>'.

container

Fill in the ID of the <div> container:
- E.g. 'taboola-slot'.

placement

Fill in the placement name, as provided by Taboola:
- E.g. '<<placementName>>'.

publisher

Fill in your alphabetic Publisher ID, as provided by Taboola
- E.g. '<<publisherID>>'

Your Publisher ID is a unique, alphabetic String. It might contain dashes - but not spaces.

target_type

Fill in the target type, as provided by Taboola:
- E.g. '<<targetType>>'.

Sample snippet(s) with actual values

🚧

The following code snippets illustrate sample values.

Make sure to fill in your own values, as provided by Taboola.

<script>
  /*
  Using JS, add a <div> container to your page, in the desired location.
  The *sample code* shown below adds a <div> to the *end of the page*. This is a *sample only*.
  
  Taboola modules served via GTM are NOT automatically responsive.
  Style the width of the <div> accordingly - e.g. use a width of 100% for mobile devices.
  */
  var div = document.createElement('div');
  div.id = 'taboola-slot'; // The ID of the <div> container (referenced below).
  div.style.width = '100%'; // Taboola modules served via GTM are NOT automatically responsive.
  document.body.appendChild(div); // This sample code adds a <div> to the *end of the page*.
</script>

<!-- Fill in YOUR OWN param values, as provided by Taboola -->
<script type="text/javascript">
   window._taboola = window._taboola || [];
   _taboola.push({article:'auto', url : top.location.href}); // for a page_type of 'article', use 'article:'auto'
  
   _taboola.push({
     mode: '<<mode>>',
     container: 'taboola-slot', // The ID of the <div> container (see above).
     placement: '<<placementName>>',
     target_type: 'mix'
   });
</script>

<!--  Fill in your Publisher ID, as provided by Taboola -->
<script src= '//cdn.taboola.com/libtrc/<<publisherID>>/loader.js'></script>

<script>
  /*
  Using JS, add a <div> container to your page, in the desired location.
  The *sample code* shown below adds a <div> to the *end of the page*. This is a *sample only*.
  
  Taboola modules served via GTM are NOT automatically responsive.
  Style the width of the <div> accordingly.
  */
  var div = document.createElement('div');
  div.id = 'taboola-slot'; // The ID of the <div> container (referenced below).
  div.style.width = '600px'; // Taboola modules served via GTM are NOT automatically responsive.
  tblDiv.style.margin = "0 auto";
  document.body.appendChild(div); // This sample code adds a <div> to the *end of the page*.
</script>

<!-- Fill in YOUR OWN param values, as provided by Taboola -->
<script type="text/javascript">
   window._taboola = window._taboola || [];
   _taboola.push({article:'auto', url : top.location.href}); // for a page_type of 'article', use 'article:'auto'
  
   _taboola.push({
     mode: '<<mode>>',
     container: 'taboola-slot', // The ID of the <div> container (see above).
     placement: '<<placementName>>',
     target_type: 'mix'
   });
</script>

<!--  Fill in your Publisher ID, as provided by Taboola -->
<script src= '//cdn.taboola.com/libtrc/<<publisherID>>/loader.js'></script>

Updated 4 months ago