Éviter les erreurs courantes d'implémentation

Les scénarios suivants illustrent certaines des erreurs les plus courantes observées lors à l'implémentation des tags GPT. Bien que de telles implémentations puissent sembler fonctionner correctement avec la de GPT, il n'est pas garanti qu'ils continuent à le faire à l'avenir. Dans dans les cas les plus extrêmes, ces implémentations peuvent entraîner des interruptions imprévisibles de la diffusion des annonces. Elles sont considérées comme des implémentations non compatibles.

Chaque scénario inclut une suggestion d'approche pour résoudre le problème affiché.

Notez que cette liste n'est pas exhaustive, mais elle est censée servir de guide pour identifier les types de problèmes doit être traitée.

De plus, selon votre implémentation, vous devrez peut-être rechercher tous les endroits où ces modifications peuvent s'avérer nécessaires sur votre site.

Erreurs fréquentes

Scénario 1: Utiliser des copies non officielles de bibliothèques JavaScript GPT

Description générale du cas d'utilisation hébergement de gpt.js, pubsub_impl.js ou toute bibliothèque qu'ils chargent depuis vos propres serveurs ; ou charger ces fichiers à partir d'une source non officielle.
Exemple d'extrait de code avec erreur
// Incorrect: Accessing these files from an unofficial source
<script async src="https://www.example.com/tag/js/gpt.js"></script>
Suggestions de solutions pour corriger l'erreur
// Correct: Access these files from a Google domain
<script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
// Also correct, if using Limited Ads
<script src="https://pagead2.googlesyndication.com/tag/js/gpt.js" async></script>

Scénario 2: Utiliser des écouteurs de tags de script gpt.js

Description générale du cas d'utilisation Supposons que l'API GPT est prête à être appelée lorsque le fichier JavaScript gpt.js est chargé correctement, car certaines parties de l'API sont fournies par pubads_impl.js. S'appuyer de quelque manière que ce soit (y compris à des frameworks) sur l'API à partir des écouteurs d'événements associés au tag de script est donc incorrecte.
Exemple d'extrait de code avec erreur
var tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = (useSSL ? 'https:' : 'http:') +
        '//www.googletagservices.com/tag/js/gpt.js';
// Incorrect: Attaching a callback to the script's onload event.
tag.onload = callback;
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(tag, node);
Suggestions de solutions pour corriger l'erreur
// Make sure that googletag.cmd exists.
window.googletag = window.googletag || {};
googletag.cmd = googletag.cmd || [];
// Correct: Queueing the callback on the command queue.
googletag.cmd.push(callback);
Explication / Description du correctif googletag.cmd conserve une liste de commandes qui seront exécutées dès que GPT est prêt. Il s'agit de la bonne méthode pour vous assurer que votre rappel est exécuté une fois le tag GPT chargé.

Scénario 3: Vérifier l'objet googletag pour savoir si GPT est prêt

Description générale du cas d'utilisation Étant donné que l'API GPT peut ne pas être prête lors du chargement du fichier JavaScript gpt.js ou lorsque l'objet googletag est défini, en vérifiant s'il est l'API GPT n'est pas fiable.
Exemple d'extrait de code avec erreur
// Incorrect: Relying on the presence of the googletag object
// as a check for the GPT API.
if (typeof googletag != 'undefined') {
 functionProcessingGPT();
}
Suggestions de solutions pour corriger l'erreur
// Correct: Relying on googletag.apiReady as a check for the GPT API.
if (window.googletag && googletag.apiReady) {
 functionProcessingGPT();
}
Explication / Description du correctif GPT insère l'indicateur booléen googletag.apiReady dès que l'API est prête à être appelée afin que vous puissiez effectuer des assertions fiables.

Scénario 4: utiliser une syntaxe de code obscurci

Description générale du cas d'utilisation Si vous vous appuyez sur la syntaxe précise du code de bibliothèque GPT réduit, rencontrer des dysfonctionnements. Veuillez vous limiter à l'API décrite dans le Guide de référence de l'API, car nous évoluons constamment le fonctionnement interne de GPT pour des améliorations constantes.
Par exemple, il est courant de devoir détecter quand PubAdsService est entièrement chargé pour appeler refresh().
Exemple d'extrait de code avec erreur
// Incorrect: Relying on an obfuscated property.
if (googletag.pubads().a != null) {
 functionProcessingGPT();
}
Suggestions de solutions pour corriger l'erreur
// Correct: Relying on public GPT API methods
// (i.e. googletag.pubadsReady in this case).
if(window.googletag && googletag.pubadsReady) {
 functionProcessingGPT();
}
Explication / Description du correctif Seule l'API publique est fiable. Pour détecter si PubAdsService entièrement chargé, nous avons une valeur booléenne googletag.pubadsReady.

Scénario 5: Écraser une fonction ou une variable de GPT

Description générale du cas d'utilisation Les cas d'utilisation basés sur le remplacement d'une fonction ou d'une variable par les tags GPT peuvent cesser à tout moment car ce cas d'utilisation n'est pas pris en charge. Il est possible que les changements de calendrier dans les données internes de GPT en quelque sorte un comportement incorrect par des dysfonctionnements.
Exemple d'extrait de code avec erreur
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
Suggestions de solutions pour corriger l'erreur
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];

Scénario 6: Ordre incorrect des appels aux tags GPT

Description générale du cas d'utilisation Les conditions de concurrence peuvent entraîner des dysfonctionnements à mesure que les composants internes de GPT évoluent. Une erreur ensemble ordonné d'instructions fonctionnelles en raison de délais d'exécution spécifiques risquent de ne pas rester opérationnels à l'avenir.
Exemple d'extrait de code avec erreur
// Incorrect: Setting page-level key-value targeting after calling
// googletag.enableServices().
googletag.enableServices();
googletag.defineSlot(...);
googletag.pubads().setTargeting(e, a);
Suggestions de solutions pour corriger l'erreur
// Correct: Setting page-level key-value targeting before calling
// googletag.enableServices().
googletag.pubads().setTargeting(e, a);
googletag.defineSlot(...);
googletag.enableServices();
Explication / Description du correctif Évitez les conditions de concurrence en veillant à respecter le timing habituel des tags GPT. Exemple valide les ordres partiels incluent: <ph type="x-smartling-placeholder">
    </ph>
  • Définir - Activer l'affichage <ph type="x-smartling-placeholder">
      </ph>
    1. Définir les paramètres au niveau de la page
    2. Définir les emplacements
    3. enableServices()
    4. Emplacements d'écran
  • Activer la définition d'affichage <ph type="x-smartling-placeholder">
      </ph>
    1. Définir les paramètres au niveau de la page
    2. enableServices()
    3. Définir les emplacements
    4. Emplacements d'écran

Scénario 7: Utiliser de manière abusive les fermetures et le champ d'application des variables JavaScript

Description générale du cas d'utilisation Hypothèses incorrectes concernant le champ d'application des variables JavaScript et la valeur des variables capturé dans la fonction transmise à googletag.cmd.push.
Exemple d'extrait de code avec erreur
// Incorrect: Variable x is declared outside the anonymous function
// but referenced within it.
for (var x = 0; x < slotCount; x++) {
 window.googletag.cmd.push(
  function(){
    // If GPT is not yet loaded, this code will be executed subsequently when
    // the command queue is processed. Every queued function will use the last value
    // assigned to x (most likely slotCount).
    // This is because the function closure captures the reference to x,
    // not the current value of x.
    window.googletag.display(slot[x]);
  })
 }
}
Suggestions de solutions pour corriger l'erreur
window.googletag.cmd.push(
 function(){
  // Correct: We both declare and reference x inside the context of the function.
  for (var x = 0; x < slotCount; x++){
   window.googletag.display(slot[x]);
  }
 }
)
Explication / Description du correctif

En JavaScript, les fermetures capturent les variables par référence plutôt que par valeur. Cela signifie que si une variable est réaffectée, sa nouvelle valeur sera utilisée lorsque la fonction la fermeture qui l'a capturée est exécutée ultérieurement. Ainsi, le comportement du code dans la fermeture peut changer selon que le rappel est exécuté immédiatement ou retardé.

Dans le cas d'un tag Google Publisher Tag chargé de manière asynchrone, selon la vitesse à laquelle le tag les rappels de la file d'attente de commandes peuvent s'exécuter immédiatement ou non. Lors de par exemple, le comportement des commandes en file d'attente est modifié.

Pour éviter tout problème, le code doit être écrit sans présumer que les fonctions placé dans la file d'attente de commandes s'exécute immédiatement, en ce qui concerne les règles de champ d'application de JavaScript.

Scénario 8: Déplacer des conteneurs d'emplacements dans le DOM après avoir appelé "display"

Description générale du cas d'utilisation Si vous déplacez ou insérez des conteneurs d'emplacements dans le DOM après avoir appelé "display", cela peut entraîner un ajustement de la mise en page indésirable et un comportement imprévisible dans GPT.
Exemple d'extrait de code avec erreur
// Incorrect: Moving slot containers after calling display
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0");
googletag.enableServices();
googletag.display("div-gpt-ad-123456789-0");
...
// Inserting another element before the slot container, pushing the slot container down the page.
document.body.insertBefore(someOtherElement, document.getElementById("div-gpt-ad-123456789-0"));
Suggestions de solutions pour corriger l'erreur
// Correct: Make any DOM order changes before calling display

document.body.insertBefore(someOtherElement, document.getElementById("div-gpt-ad-123456789-0"));
...
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0");
googletag.enableServices();
googletag.display("div-gpt-ad-123456789-0");