Unikanie najczęstszych błędów implementacji

Poniższe scenariusze przedstawiają niektóre z najczęstszych błędów popełnianych podczas implementacji GPT. Implementacje takie mogą działać dobrze z obecnymi nie możemy 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 sugerowane podejście do rozwiązania przedstawionego problemu.

Pamiętaj, że ta lista nie zawiera wszystkich potencjalnych problemów, ale ma służyć jako przewodnik po typach problemów, które mogą wymagać rozwiązania.

Ponadto, w zależności od implementacji, może być konieczne wyszukanie wszystkich miejsc, w których może to być konieczne.

Typowe błędy

Scenariusz 1. Korzystanie z nieoficjalnych kopii bibliotek JavaScript GPT

Ogólny opis przypadku użycia hostowanie plików gpt.js, pubads_impl.js lub dowolnych bibliotek wczytywanych z Twoich serwerów; podczas wczytywania 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 naprawienia 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 jakikolwiek sposób polegać na interfejsie API (dotyczy to również platform). z detektorów zdarzeń podłączonych do tagu skryptu jest więc nieprawidłowy.
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 możesz mieć pewność, że funkcja wywołania zwrotnego zostanie wykonana po załadowaniu tagu GPT.

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

Ogólny opis przypadku użycia Interfejs GPT API może nie być gotowy, gdy załadowany zostanie plik JavaScript gpt.js lub gdy obiekt googletag jest zdefiniowany, sprawdzając go, czy interfejs API GPT jest zawodny.
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łni flagę logiczną googletag.apiReady, gdy tylko interfejs API jest gotowy do wywoływania, dzięki czemu można tworzyć rzetelne asercje.

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 wykrywania, czy usługa PubAdsService jest w pełni załadowana, mamy wartość logiczną googletag.pubadsReady.

Scenariusz 5. Zastąpienie 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. Zmiany w czasie w elementach wewnętrznych GPT mogą powodować takie nieprawidłowe działanie w postaci błędów.
Przykładowy fragment kodu z błędem 
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
Sugerowane sposoby naprawiania błędu 
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];

Scenariusz 6. Nieprawidłowa kolejność wywołań GPT

Ogólny opis przypadku użycia Warunki wyścigowe mogą powodować awarie w miarę ewolucji wewnętrznych komponentów GPT. 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 wyścigów, pamiętając o przestrzeganiu typowych czasów tagów GPT. Prawidłowy przykład zamówienia częściowe obejmują:
  • Define-Enable-Display
    1. Definiowanie ustawień na poziomie strony
    2. Zdefiniuj przedziały
    3. enableServices()
    4. Miejsca docelowe w sieci reklamowej
  • Włącz definiowanie-wyświetlania
    1. Definiowanie ustawień na poziomie strony
    2. enableServices()
    3. Definiowanie przedziałów
    4. Miejsca docelowe w sieci reklamowej

Scenariusz 7. Nieprawidłowe używanie funkcji zamykających i zakresu zmiennych JavaScriptu

Ogólny opis 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 JavaScripcie informacje o zamknięciach rejestrują zmienne przez odwołanie, a nie według 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ę różnić w zależności od tego, czy wywołanie zwrotne zostanie wykonane 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, podczas pisania kodu nie należy zakładać, że funkcje umieszczone w kolejce poleceń są wykonywane natychmiast i należy zachować ostrożność, dotyczące reguł określania zakresu w JavaScripcie.

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

Ogólny opis przypadku użycia Przenoszenie lub wstawianie boksów reklamowych w DOM po wywołaniu wyświetlenia może spowodować niepożądane przeformatowanie i nieprzewidywalne działanie 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 doprowadzić do uszkodzenia skryptów innych firm, np. GPT, w nieoczekiwany sposób.
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