GTM Advanced Options
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 over 2 years ago