Documentation pour intégration de Prebid avec GAM
Intégration des libraries
1/ Dans la partie <head>, ajouter la librairie pour détecter le type d'appareil (mobile, tablette ou ordinateur) :
<script type="text/javascript">
!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);
if(isMobile.phone) {
is_mobile = true;
is_tablet = false;
is_desktop = false;
} else if(isMobile.tablet) {
is_mobile = false;
is_tablet = true;
is_desktop = false;
} else {
is_mobile = false;
is_tablet = false;
is_desktop = true;
}
</script>
Si vous disposez de votre propre librairie, il suffit alors d'initialiser les 3 variables : is_mobile, is_tablet et is_desktop avec les valeurs true / false.
2/ Ajouter ensuite l'appel aux libraries Prebid et GAM :
<script type="text/javascript" async src="[URL_PREBID]"></script>
<script type="text/javascript" async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
En remplaçant [URL_PREBID] par l'url du script qui vous a été fournie (ou qui est présente dans le code source de votre page d'exemple).
Déclaration des emplacements GAM
Toujours dans la partie <head>, il faut maintenant déclarer les emplacements publicitaires à afficher dans la page. Pour cela, il suffit de reprendre le code qui est dans la page d'exemple qui vous a été fournie. Exemple :
<script type="text/javascript">
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
if(is_mobile)
{
googletag.defineSlot('/46980923/example-web',
[[300,250],[300,600],[336,280],[320,50],[320,100],[300,50],[300,100]],
'div-gpt-ad-masthead_haut')
.setTargeting('pos', '101')
.addService(googletag.pubads());
googletag.defineSlot('/46980923/example-web',
[[300,250],[300,600],[336,280],[320,50],[320,100],[300,50],[300,100]],
'div-gpt-ad-mpu_haut')
.setTargeting('pos', '102')
.addService(googletag.pubads());
googletag.defineSlot('/46980923/example-web',
[[300,250],[300,600],[336,280],[320,50],[320,100],[300,50],[300,100]],
'div-gpt-ad-mpu_bas')
.setTargeting('pos', '103')
.addService(googletag.pubads());
}
else
{
googletag.defineSlot('/46980923/example-web',
[[1,1]],
'div-gpt-ad-habillage')
.addService(googletag.pubads());
googletag.defineSlot('/46980923/example-web',
[[728,90],[970,250]],
'div-gpt-ad-masthead_haut')
.setTargeting('pos', '1')
.addService(googletag.pubads());
googletag.defineSlot('/46980923/example-web',
[[300,250],[300,600],[300,100],[120,600],[160,600]],
'div-gpt-ad-mpu_haut')
.setTargeting('pos', '2')
.addService(googletag.pubads());
}
// Exemples de setTargeting global :
// googletag.pubads().setTargeting('page_id', ['2']);
// googletag.pubads().setTargeting('type_contenu', ['article']);
// googletag.pubads().setTargeting('rubrique', ['actu']);
googletag.pubads().disableInitialLoad();
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.pubads().setCentering(true);
googletag.enableServices();
if ( typeof(reworldAd) != 'undefined' )
reworldAd.refresh();
else
googletag.pubads().refresh();
});
</script>
Les lignes commentées avec les "setTargeting" permettent d'envoyer à GAM des informations sur la page en cours. Elles facilitent le ciblage des campagnes sur des pages, ou des types de pages précises. Dans l'administration de GAM, cela correspond aux paires clés-valeurs.
Pour en savoir plus sur la création et l'utilisation des paires clés-valeurs, nous vous conseillons cet article.
Appel aux emplacements GAM
Les emplacements publicitaires ont été déclarés, il reste donc à les positionner dans la page pour les afficher. La liste des emplacements est dans la page d'exemple qui vous a été fourni. Exemple :
<div id="div-gpt-ad-masthead_haut">
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-masthead_haut'); });
</script>
</div>
Une particularité pour l'emplacement "Habillage" (si vous l'utilisez) est qu'il ne doit être présent que sur desktop
<div id="div-gpt-ad-habillage">
<script>
if(!is_mobile)
{
googletag.cmd.push(function() { googletag.display('div-gpt-ad-habillage'); });
}
</script>
</div>
L'emplacement habillage peut être positionné en haut de page.
L'emplacement masthead_haut est généralement placé entre le menu du site et le début du contenu.
Les emplacements mpu_haut et mpu_bas sont à mettre en colonne (minimium 300px de largeur)
Attention
- Pour chacune des déclarations vues plus haut : googletag.defineSlot(...) doit correspondre un tag d'emplacement
- Et vice-versa: Pour chacun de ces tags d'emplacement doit correspondre à une déclaration de l'emplacement
- Si il manque le defineSlot, la publicité ne s'affichera pas.
- Si il y a le defineSlot mais pas le display, alors prebid et google seront sollicités sans que la pub ne soit affichée, ce qui est mauvais pour la visiblité.
Refresh des pubs
Si vous souhaitez rafraîchir les emplacements publicitaires de la page, par exemple dans une page avec un slider d'images, vous pouvez appeler la fonction suivante :
if ( typeof(reworldAd) != 'undefined' )
reworldAd.refresh();
else
googletag.pubads().refresh();
Il n'est pas nécessaire de capper l'appel au refresh car GAM le gère automatiquement. Cela signifie que si la fonction refresh est appelée alors que les publicités ne sont pas encore récupérées, GAM bloquera l'éxécution du refresh.
Quelques remarques
CMP
Cette documentation n'inclut pas les règles spécifiques à la CMP. Il est important de disposer d'une CMP car Prebid ne peut pas appeler les SSP sans passer la consent string. Nous pouvons vous aider à mettre à jour le code, suivant la CMP que vous utilisez.Exemple avec Didomi :
Remplacer l'appel à la librairie GAM :
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script><script type="didomi/javascript" data-vendor="didomi:google" async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>