Les scénarios suivants illustrent certaines des erreurs les plus courantes observées lors de l'implémentation de GPT. Bien que de telles implémentations semblent fonctionner correctement avec la version actuelle de GPT, il n'est pas garanti qu'elles continueront de le faire à l'avenir. Dans les cas les plus extrêmes, ces mises en œuvre peuvent entraîner l'interruption de la diffusion des annonces de manière imprévisible. Elles sont considérées comme des implémentations non compatibles.
Chaque scénario comprend une approche suggérée pour résoudre le problème présenté.
Veuillez noter que cette liste n'est pas exhaustive, mais qu'elle sert de guide pour identifier les types de problèmes à résoudre.
De plus, en fonction de votre implémentation, vous devrez peut-être rechercher tous les endroits de votre site où de telles modifications peuvent être nécessaires.
Erreurs fréquentes
Scénario 1: Utiliser des copies non officielles des bibliothèques JavaScript GPT
| Description générale du cas d'utilisation | Héberger gpt.js, pubads_impl.js ou toute bibliothèque que ceux-ci chargent depuis vos propres serveurs, ou charger ces fichiers à partir d'une source non officielle |
| Exemple d'extrait de code comportant une 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 async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> // Also correct, if using Limited Ads <script async src="https://pagead2.googlesyndication.com/tag/js/gpt.js"></script> |
Scénario 2: Utilisation des écouteurs de balises de script gpt.js
| Description générale du cas d'utilisation |
Si l'API GPT est prête à être appelée lors du chargement du fichier JavaScript gpt.js, cela signifie que certaines parties de l'API sont fournies par le fichier pubads_impl.js. Il est donc incorrect de s'appuyer sur l'API d'une manière ou d'une autre (y compris de frameworks) à partir d'écouteurs d'événements associés à la balise de script.
|
| Exemple d'extrait de code comportant une 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 gère une liste de commandes qui seront exécutées dès que GPT sera prêt. C'est la bonne façon de 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 n'est peut-être pas prête lorsque le fichier JavaScript gpt.js est chargé ou lorsque l'objet googletag est défini, vérifier cet objet pour voir si l'API GPT n'est pas fiable n'est pas fiable.
|
| Exemple d'extrait de code comportant une 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, ce qui permet d'effectuer des assertions fiables. |
Scénario 4: utiliser une syntaxe de code obscurci
| Description générale du cas d'utilisation |
Si vous utilisez la syntaxe précise du code de la bibliothèque GPT réduite, vous rencontrerez très certainement des problèmes. Veuillez limiter votre utilisation à l'API décrite dans le guide de référence de l'API, car nous modifions constamment le fonctionnement interne de GPT pour l'améliorer en permanence. Par exemple, il est courant de détecter le moment où PubAdsService est entièrement chargé afin d'appeler refresh().
|
| Exemple d'extrait de code comportant une 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 peut être utilisée. Pour déterminer si PubAdsService est entièrement chargé, nous utilisons une valeur booléenne googletag.pubadsReady. |
Scénario 5: Remplacer une fonction ou une variable de GPT
| Description générale du cas d'utilisation | Les cas d'utilisation basés sur l'écrasement d'une fonction ou d'une variable utilisée par GPT peuvent ne plus fonctionner, car ils ne sont pas acceptés. Des modifications de la chronologie dans les composants internes de GPT peuvent mettre en évidence ce type de comportement incorrect en raison de défaillances. |
| Exemple d'extrait de code comportant une 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: Ordonner les appels vers GPT
| Description générale du cas d'utilisation | Les conditions de concurrence peuvent entraîner des dysfonctionnements à mesure que les éléments internes de GPT évoluent. Un ensemble mal ordonné d'instructions qui étaient fonctionnelles en raison de délais d'exécution spécifiques risque de ne plus rester opérationnel à l'avenir. |
| Exemple d'extrait de code comportant une 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 respectant la chronologie habituelle de GPT. Voici quelques exemples de tri partiels valides :
|
Scénario 7: Utilisation abusive des fermetures et du champ d'application des variables JavaScript
| Description générale du cas d'utilisation |
Hypothèses incorrectes concernant la portée des variables JavaScript et la valeur des variables capturées dans la fonction transmise à googletag.cmd.push.
|
| Exemple d'extrait de code comportant une 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éattribuée, sa nouvelle valeur sera utilisée lors de l'exécution ultérieure de la fermeture de la fonction qui l'a capturée. Ainsi, le comportement du code lors de la fermeture peut changer selon que le rappel est exécuté immédiatement ou retardé. Dans le cas d'un tag GPT à chargement asynchrone, l'exécution immédiate ou non des rappels dans la file d'attente de commandes dépend de la vitesse à laquelle GPT est chargé. Dans l'exemple ci-dessus, cela modifie le comportement des commandes en file d'attente. Pour éviter tout problème, le code doit être écrit sans supposer que les fonctions placées dans la file d'attente de commandes s'exécutent immédiatement, et vous devez veiller à respecter les règles de champ d'application de JavaScript. |
Scénario 8: Déplacer les conteneurs d'emplacements dans le DOM après avoir appelé "display"
| Description générale du cas d'utilisation | Le déplacement ou l'insertion de conteneurs d'emplacements dans le DOM après l'appel de "display" peut entraîner un ajustement de la mise en page indésirable et un comportement imprévisible dans GPT. |
| Exemple d'extrait de code comportant une 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");
|