Vous trouverez ci-dessous un exemple du code complet permettant de créer un tag Google Publisher Tag (GPT) pour ordinateur et pour mobile. Utilisez le générateur de tags Google pour générer des tags automatiquement.
Les développeurs et ceux qui ont besoin d'implémentations avancées de GPT peuvent consulter la documentation de référence de l'API et des exemples d'intégration (chargement différé, par exemple).
Consulter des exemples avancés de tags GPT
Exemple de code Google Publisher Tag
Le code GPT est divisé en deux sections :
- La configuration de GPT doit être placée dans la section
<head>de la page Web. - Les appels de chaque espace publicitaire spécifique sont placés dans la section correspondante de
<body>.
Cet exemple est fourni à titre informatif. Nous vous recommandons de demander à un développeur d'insérer le code sur votre site Web.
Configuration GPT
L'exemple de code suivant inclut l'appel de la bibliothèque JavaScript GPT, la définition des espaces publicitaires, le ciblage par clé-valeur, etc.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
Lignes 3 à 6 : charge de manière asynchrone la bibliothèque GPT utilisée par Ad Manager (via SSL/HTTPS). C'est ici qu'est créée la file d'attente de commandes qui gère la liste des fonctions à exécuter de manière synchrone (en général, les appels d'annonces). Vous n'avez pas besoin de modifier cette partie du code. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
Ligne 9 :
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
| 15 | .setTargeting("age", "20-30"); |
|
Lignes 11, 14 et 15 : définissez un ciblage par clé-valeurs au niveau de l'espace avec En savoir plus sur la procédure à suivre pour définir un ciblage et des tailles à l'aide d'un tag Google Publisher Tag |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Ligne 16 : Lorsque le ciblage est configuré avec des clé-valeurs au niveau de la page, il s'applique à tous les espaces publicitaires. Comme pour le ciblage par paires valeur/clé au niveau de l'espace publicitaire, il est possible d'associer plusieurs valeurs à une clé, comme suit : ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Ligne 17 : |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Ligne 23 (facultatif) : Si vous utilisez des tags avec plusieurs tailles, nous vous recommandons d'omettre ce paramètre (auquel cas l'élément reprend la taille de la création sélectionnée une fois celle-ci diffusée), ou de prévoir une hauteur et une largeur suffisamment importantes pour que l'élément puisse accueillir la création la plus grande. Dans le cas de tags d'emplacement publicitaire à taille unique, utilisez ce paramètre pour agrandir l'élément conteneur jusqu'à ce que la création soit chargée. Cela évite que les autres éléments de la page ne se décalent une fois la création affichée. |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
Lignes 8, 25 et 32 : des appels de fonction sont ajoutés à la file d'attente de commandes à exécuter de manière asynchrone lors du chargement de la page. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Lignes 9, 12, 23, 26, 30, et 33 : Bien que des nombres aléatoires soient utilisés ici, GPT ne sert pas à identifier une demande d'annonce de manière unique. Cette opération s'effectue en arrière-plan grâce à la bibliothèque GPT. En outre, ces noms peuvent être réutilisés d'une page à l'autre, tant que vous respectez la limite d'une seule instance du nom div par page. Pour en savoir plus sur la structure de l'inventaire Ad Manager et sur la hiérarchie de blocs d'annonces, ou pour découvrir comment les blocs d'annonces héritent des paramètres de ciblage, consultez l'article de présentation de l'inventaire. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Consulter des exemples avancés de tags GPT
Si vous ne parvenez pas à modifier l'en-tête de vos pages Web
Vous pouvez utiliser GPT sans modifier la balise <header> de votre site Web.
Option 1 : GPT intégré
Utilisez un tag intégré (plutôt que l'en-tête de page) pour déterminer l'endroit où le bloc d'annonces doit s'afficher sur la page. Avec ce type de tag, la définition et la demande associées à l'espace publicitaire Google Publisher Tag (y compris le chargement de la bibliothèque Google Publisher Tag) sont intégralement contenues dans un seul tag <script>.
Comme le tag d'emplacement publicitaire utilise la bibliothèque JavaScript Google Publisher Tag, vous devez inclure le code qui charge cette bibliothèque avant celui du tag d'emplacement publicitaire.
Ces exemples de tags Google Publisher Tag intégrés ne sont pas compatibles avec l'architecture de demande simple.
Appel de la bibliothèque JavaScript Google Publisher Tag
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
Exemple de tag d'emplacement publicitaire intégré
<div id="div-gpt-ad-1234567891234-0">
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
.addService(googletag.pubads())
.setTargeting("Gender", "Male");
googletag.enableServices();
googletag.display('div-gpt-ad-1234567891234-0');
});
</script>
</div>
Option 2 : insérer tout le code dans le corps de la page Web
Utilisez le mode d'insertion traditionnel des tags Google Publisher Tag. Toutefois, au lieu de placer les définitions de l'espace publicitaire dans l'en-tête de votre page HTML, insérez-les dans le corps de celle-ci.
Vous devez appeler le code qui charge la bibliothèque et définit les espaces publicitaires avant d'effectuer une demande d'annonce pour ces espaces. Comme le code n'est pas segmenté dans l'en-tête et le corps de votre page, et vu que vous devez gérer sa séquence, cette méthode s'avère plus complexe. Toutefois, elle vous permet d'utiliser l'architecture de demande simple.
Créer une demande sans tag sans JavaScript
Vous pouvez utiliser une demande sans tag à la place d'un tag d'emplacement publicitaire pour demander du code de création brut dont l'insertion est effectuée dans Ad Manager. Ce type de demande sert généralement dans le cadre de l'analyse et de l'affichage personnalisés, par exemple pour les boîtiers décodeurs ou d'autres environnements sans SDK ni tags Google.