Unikanie najczęstszych błędów implementacji

Poniższe scenariusze przedstawiają niektóre z najczęstszych błędów popełnianych podczas implementacji GPT. Tagi, które stosujesz, mogą działać prawidłowo, nawet jeśli zawierają błędy opisane w artykule. Nie możemy jednak zagwarantować, że nie zmieni się to w przyszłości. W najbardziej skrajnych przypadkach takie implementacje mogą powodować nieprzewidywalne błędy w wyświetlaniu reklam. Są one uznawane za nieobsługiwane implementacje.

Każdy scenariusz zawiera sugerowaną metodę rozwiązania wskazanego problemu.

Pamiętaj, że ta lista nie jest wyczerpująca lista potencjalnych problemów, ale powinien służyć za przydatną wskazówkę dotyczącą typów problemów, które mogą wymagać i kwestii takich działań.

Ponadto w zależności od implementacji może być konieczne sprawdzenie wszystkich miejsc w witrynie, w których mogą być potrzebne takie zmiany.

Typowe błędy

Scenariusz 1. Korzystanie z nieoficjalnych kopii bibliotek JavaScript GPT

Ogólny opis przypadku użycia Przechowywanie bibliotek gpt.js, pubads_impl.js lub bibliotek ładowanych z własnych serwerów albo wczytywanie tych plików z nieoficjalnego źródła.
Przykładowy fragment kodu z błędem 
// Incorrect: Accessing these files from an unofficial source
<script async src="https://www.example.com/tag/js/gpt.js"></script>
Sugerowane sposoby naprawiania błędu 
// 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>

Scenariusz 2. Korzystanie z detektorów tagu skryptu gpt.js

Ogólny opis przypadku użycia Założenie, że interfejs GPT API jest gotowy do wywołania po załadowaniu pliku JavaScript (gpt.js), jest błędne, ponieważ niektóre części interfejsu API są dostarczane przez plik pubads_impl.js. W związku z tym korzystanie z interfejsu API w dowolny sposób (w tym w ramach frameworków) w detektorach zdarzeń dołączonych do tagu skryptu jest nieprawidłowe.
Przykładowy fragment kodu z błędem 
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);
Sugerowane sposoby naprawiania błędu 
// 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);
Wyjaśnienie lub opis poprawki googletag.cmd przechowuje listę poleceń, które zostaną uruchomione zaraz po GPT jest gotowy. W ten sposób masz pewność, że wywołanie zwrotne będzie uruchamiane po wczytaniu tagu GPT.

Scenariusz 3. Sprawdzanie obiektu googletag, aby dowiedzieć się, czy tag GPT jest gotowy

Ogólny opis przypadku użycia Ponieważ interfejs GPT API może nie być gotowy, gdy wczytuje się plik JavaScript gpt.js lub gdy definiowany jest obiekt googletag, sprawdzenie tego obiektu w celu potwierdzenia, czy interfejs GPT API jest dostępny, nie jest wiarygodne.
Przykładowy fragment kodu z błędem 
// Incorrect: Relying on the presence of the googletag object
// as a check for the GPT API.
if (typeof googletag != 'undefined') {
 functionProcessingGPT();
}
Sugerowane sposoby naprawiania błędu 
// Correct: Relying on googletag.apiReady as a check for the GPT API.
if (window.googletag && googletag.apiReady) {
 functionProcessingGPT();
}
Wyjaśnienie lub opis poprawki GPT wypełnia flagę logiczną googletag.apiReady, gdy tylko interfejs API jest gotowy do wywołania, aby umożliwić Ci tworzenie wiarygodnych twierdzeń.

Scenariusz 4. Poleganie na składni zaciemnionego kodu

Ogólny opis przypadku użycia Jeśli polegasz na dokładnej składni skompresowanego kodu biblioteki GPT, prawie na pewno wystąpią problemy. Ogranicz korzystanie z interfejsu API do interfejsu udokumentowanego w przewodniku po interfejsie API, ponieważ stale ulepszamy interfejs GPT.
Typowym wymaganiem jest na przykład wykrywanie, kiedy usługa PubAdsService jest w pełni załadowana, aby wywołać refresh().
Przykładowy fragment kodu z błędem 
// Incorrect: Relying on an obfuscated property.
if (googletag.pubads().a != null) {
 functionProcessingGPT();
}
Sugerowane sposoby naprawiania błędu 
// Correct: Relying on public GPT API methods
// (i.e. googletag.pubadsReady in this case).
if(window.googletag && googletag.pubadsReady) {
 functionProcessingGPT();
}
Wyjaśnienie lub opis poprawki Można polegać tylko na publicznym interfejsie API. W przypadku sprawdzania, czy usługa PubAdsService jest w pełni załadowano, mamy wartość logiczną googletag.pubadsReady.

Scenariusz 5. Zastępowanie dowolnej funkcji lub zmiennej GPT

Ogólny opis przypadku użycia Przypadki użycia oparte na zastępowaniu dowolnej funkcji lub zmiennej używanej przez GPT mogą ulec awarii w dowolnym momencie, ponieważ nie są obsługiwane. Mogą to być spowodowane zmianami czasu w wewnętrznych komponentach GPT. niewłaściwego działania przez awarie.
Przykładowy fragment kodu z błędem 
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
Sugerowane sposoby naprawienia błędu 
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];

Scenariusz 6. Nieprawidłowy porządek wywołania GPT

Opis ogólny przypadku użycia W miarę ewolucji wewnętrznych elementów GPT mogą występować warunki wyścigu, które mogą powodować awarie. Nieprawidłowo uporządkowany zbiór instrukcji, który działał ze względu na określone czasy wykonania, może nie działać w przyszłości.
Przykładowy fragment kodu z błędem 
// Incorrect: Setting page-level key-value targeting after calling
// googletag.enableServices().
googletag.enableServices();
googletag.defineSlot(...);
googletag.pubads().setTargeting(e, a);
Sugerowane sposoby naprawiania błędu 
// Correct: Setting page-level key-value targeting before calling
// googletag.enableServices().
googletag.pubads().setTargeting(e, a);
googletag.defineSlot(...);
googletag.enableServices();
Wyjaśnienie lub opis poprawki Unikaj warunków wyścigu, przestrzegając zwykłego harmonogramu GPT. Prawidłowy przykład zamówienia częściowe obejmują:
  • Definiowanie-włącz-wyświetlanie
    1. Definiowanie ustawień na poziomie strony
    2. Zdefiniuj przedziały
    3. enableServices()
    4. Miejsca docelowe w sieci reklamowej
  • Enable-Define-Display
    1. Definiowanie ustawień na poziomie strony
    2. enableServices()
    3. Definiowanie przedziałów
    4. Przedziały reklam displayowych

Scenariusz 7. Niewłaściwe użycie zamknięcia i zakresu zmiennych JavaScriptu

Opis ogólny przypadku użycia Nieprawidłowe założenia dotyczące zakresu zmiennych JavaScriptu i wartości zmiennych przechwyconych w funkcji przekazanej do googletag.cmd.push.
Przykładowy fragment kodu z błędem 
// 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]);
  })
 }
}
Sugerowane sposoby naprawiania błędu 
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]);
  }
 }
)
Wyjaśnienie lub opis poprawki

W JavaScriptzie funkcje zamykające przechwytują zmienne na podstawie odwołania, a nie wartości. Oznacza to, że że jeśli zmienna zostanie przypisana ponownie, jej nowa wartość zostanie użyta, gdy funkcja Zarejestrowana funkcja zamknięcia jest później wykonywana. Dlatego zachowanie kodu w zamknięciu może się zmieniać w zależności od tego, czy wywołanie zwrotne jest wykonywane natychmiast czy opóźnione.

W przypadku tagu GPT wczytywanego asynchronicznie – w zależności od tego, jak szybko GPT wywołania zwrotne w kolejce poleceń mogą być wykonywane natychmiast, ale nie. W poprzedniej na przykład zmienia zachowanie poleceń w kolejce.

Aby uniknąć problemów, kod powinien być napisany bez założenia, że funkcje umieszczone w kole zadań zostaną wykonane natychmiast. Należy też zachować ostrożność w stosowaniu reguł zakresu w JavaScript.

Scenariusz 8. Przenoszenie kontenerów boksów reklamowych w DOM po wywołaniu wyświetlenia

Ogólny opis przypadku użycia Przeniesienie lub wstawienie kontenerów przedziałów w DOM po wywołaniu trybu displayowego może spowodować niepożądane przeformatowanie i nieprzewidywalne zachowanie w GPT.
Przykładowy fragment kodu z błędem 
// 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"));
Sugerowane sposoby naprawiania błędu 
// 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");

Scenariusz 9. Zastępowanie interfejsów API przeglądarki

Ogólny opis przypadku użycia Zastępowanie (tzw. monkey patching, polyfilling) interfejsów API przeglądarki nie jest obsługiwane w GPT. Może to spowodować nieoczekiwane błędy w skryptach innych firm, takich jak GPT.
Przykładowy fragment kodu z błędem 
// Incorrect: Overwriting window.fetch
const { fetch: originalFetch } = window;
window.fetch = (...args) => {
 console.log('Fetching!');
 return originalFetch(resource, config);
};
Sugerowane sposoby naprawiania błędu 
// Correct: Avoid making changes to browser APIs.
// If you need custom logic, consider leaving the browser API intact.
const myFetch = (...args) => {
  console.log('Fetching!');
  return window.fetch(...args);
}
Wstecz
Monitorowanie skuteczności