Sprawdzone metody korzystania z tagów i menedżerów tagów

Optymalizowanie tagów i menedżerów tagów pod kątem podstawowych wskaźników internetowych.

Tagi to fragmenty kodu firm zewnętrznych umieszczane w witrynie, zwykle za pomocą menedżera tagów. Tagi są najczęściej używane do marketingu i analizy.

Wpływ na skuteczność tagów i menedżerów tagów jest bardzo zróżnicowany w zależności od witryny. Menedżer tagów można porównać do koperty – menedżer tagów zapewnia Ci naczynie, ale to, czym go zapełnisz i jak z niego korzystasz, zależy głównie od Ciebie.

W tym artykule omawiamy techniki optymalizacji tagów i menedżerów tagów pod kątem wydajności i wskaźników internetowych. Chociaż ten artykuł dotyczy Menedżera tagów Google, wiele omówionych propozycji ma zastosowanie również do innych menedżerów tagów.

Wpływ na podstawowe wskaźniki internetowe

Menedżer tagów może często wpływać pośrednio na podstawowe wskaźniki internetowe, zużywając zasoby potrzebne do szybkiego wczytywania strony i utrzymywania jej responsywności. Możesz wykorzystać przepustowość na pobieranie kodu JavaScript Menedżera tagów do witryn lub powiązane z nim wywołania. Czas pracy procesora w wątku głównym można poświęcić na ocenę i wykonanie kodu JavaScript zawartego w menedżerze tagów i tagach.

Największe wyrenderowanie treści (LCP) jest podatne na rywalizację z przepustowością podczas krytycznego czasu wczytywania strony. Poza tym zablokowanie wątku głównego może opóźnić czas renderowania LCP.

Na działanie skumulowanego przesunięcia układu (CLS) można mieć wpływ, opóźniając wczytywanie najważniejszych zasobów przed pierwszym wyrenderowaniem lub przez wstrzyknięcie treści na stronie przez menedżerów tagów.

Opóźnienie przy pierwszym działaniu (FID) jest podatne na rywalizację z CPU w wątku głównym. Może to również wpłynąć na nowsze dane Interakcja z kolejnym wyrenderowaniem (INP). Zauważyliśmy też korelację między rozmiarem menedżerów tagów i gorszymi wynikami INP.

Rodzaje tagów

Wpływ tagów na skuteczność zależy od ich typu. Ogólnie najskuteczniejsze są tagi graficzne („piksele”). Następne w kolejności są szablony niestandardowe, a na koniec niestandardowe tagi HTML. Tagi dostawców różnią się w zależności od dopuszczanych przez nich funkcji.

Pamiętaj jednak, że sposób używania tagu wpływa na jego wydajność. „Piksele” są bardzo skuteczne głównie dlatego, że ten typ tagu nakłada ścisłe ograniczenia na sposób, w jaki można ich używać. Niestandardowe tagi HTML nie zawsze mają negatywny wpływ na wydajność, ale ze względu na poziom swobody, jakie oferują użytkownikom, łatwo jest ich używać w sposób, który pogarsza skuteczność.

Podczas określania tagów miej na uwadze skalę – wpływ na skuteczność każdego tagu może być znikomy, ale może być znaczny, gdy na jednej stronie używane są dziesiątki lub setki tagów.

Nie wszystkie skrypty powinny być wczytywane za pomocą menedżera tagów

Menedżery tagów zwykle nie są dobrym mechanizmem wczytywania zasobów, które od razu implementują wizualne lub funkcjonalne aspekty obsługi, np. powiadomienia o plikach cookie, banery powitalne czy funkcje witryny. Załadowanie tych zasobów za pomocą menedżera tagów zwykle opóźnia ich dostarczanie. Jest to niekorzystne dla wygody użytkowników i może też zwiększyć wskaźniki takie jak LCP i CLS. Pamiętaj też, że niektórzy użytkownicy blokują menedżerów tagów. Używanie Menedżera tagów do wdrażania funkcji UX może spowodować, że witryna nie będzie działać prawidłowo.

Zachowaj ostrożność w przypadku niestandardowych tagów HTML

Niestandardowe tagi HTML są dostępne od wielu lat i są intensywnie używane w większości witryn. Niestandardowe tagi HTML umożliwiają wpisywanie własnego kodu z niewielkimi ograniczeniami. Wbrew nazwie głównym zastosowaniem tego tagu jest dodawanie do strony niestandardowych elementów <script>.

Niestandardowych tagów HTML można używać na wiele sposobów, a ich skuteczność znacząco się różni. Mierząc skuteczność witryny, pamiętaj, że większość narzędzi przypisze wpływ niestandardowego tagu HTML na wydajność menedżerowi tagów, który go wstrzyknął, a nie sam tag.

Niestandardowe tagi HTML mogą wstawiać elementy na otaczającej ją stronie. Wstawianie elementów do strony może powodować problemy z wydajnością, a w niektórych przypadkach również przesunięcia układu.

• W większości przypadków po wstawieniu elementu na stronie przeglądarka musi ponownie obliczyć rozmiar i pozycję każdego elementu na stronie – jest to tzw. układ. Wpływ pojedynczego układu na wydajność jest minimalny, ale zbyt duży może powodować problemy z wydajnością. Wpływ tego zjawiska jest większy w przypadku słabszych urządzeń i stron z dużą liczbą elementów DOM.
• Jeśli widoczny element strony został wstawiony do DOM po już wyrenderowaniu otaczającego go obszaru, może to spowodować przesunięcie układu. To zjawisko nie dotyczy tylko menedżerów tagów, ale ponieważ tagi zwykle wczytują się później niż inne części strony, często są wstawiane do elementu DOM już po wyrenderowaniu otaczającej go strony.

Rozważ użycie szablonów niestandardowych

Szablony niestandardowe obsługują niektóre te same operacje co niestandardowe tagi HTML, ale są oparte na wersji JavaScriptu uruchamianej w trybie piaskownicy, która udostępnia interfejsy API do typowych zastosowań, takich jak wstrzykiwanie skryptów i wstrzykiwanie pikseli. Jak sama nazwa wskazuje, umożliwiają one utworzenie szablonu przez doświadczonego użytkownika, który będzie mógł to osiągnąć z myślą o wydajności. Mniej techniczni użytkownicy będą mogli z niego korzystać. Jest to często bezpieczniejsze niż zapewnienie pełnego dostępu do niestandardowego kodu HTML.

Ze względu na wyższe ograniczenia nałożone na szablony niestandardowe tagi te rzadziej powodują problemy z wydajnością i bezpieczeństwem. Jednak z tych samych powodów szablony niestandardowe nie będą działać we wszystkich przypadkach użycia.

Wstawiaj skrypty prawidłowo

Użycie menedżera tagów do wstawiania skryptu to bardzo częsty przypadek użycia. Aby to zrobić, najlepiej użyć szablonu niestandardowego i interfejsu API injectScript.

Informacje o używaniu interfejsu injectScript API do konwertowania istniejącego niestandardowego tagu HTML znajdziesz w artykule Konwertowanie istniejącego tagu.

Jeśli musisz użyć niestandardowego tagu HTML, pamiętaj o tych kwestiach:

• Biblioteki i duże skrypty innych firm należy ładować za pomocą tagu skryptu, który pobiera plik zewnętrzny (np. <script src="external-scripts.js">), a nie bezpośrednio kopiować i wklejać zawartość skryptu do tagu. Rezygnacja z tagu <script> eliminuje konieczność pobrania zawartości skryptu w obie strony, ale zwiększa rozmiar kontenera i zapobiega buforowaniu skryptu niezależnie przez przeglądarkę.
• Wielu dostawców zaleca umieszczanie tagu <script> na górze strony <head>. Jednak w przypadku skryptów wczytywanych przez menedżera tagów ta rekomendacja jest zazwyczaj niepotrzebna – w większości przypadków przeglądarka zakończyła już analizowanie parametru <head> przed wykonaniem go przez menedżera tagów.

Użyj pikseli

Czasami skrypty innych firm można zastąpić „pikselami” graficznymi lub iframe. W porównaniu z ich odpowiednikami opartymi na skryptach piksele mogą obsługiwać mniej funkcji, dlatego z tego powodu często są postrzegane jako implementacja tego, co zwykle jest mniej preferowaną. Jednak w przypadku używania w menedżerach tagów piksele mogą być bardziej dynamiczne, bo mogą uruchamiać się pod kątem reguł i przekazywać różne zmienne. Jest to najskuteczniejszy i najbezpieczniejszy typ tagu, ponieważ po jego uruchomieniu nie jest wykonywane żadne wykonywanie kodu JavaScript. Piksele mają bardzo mały rozmiar zasobu (poniżej 1 KB) i nie powodują przesunięcia układu.

Skontaktuj się z dostawcą zewnętrznym, aby uzyskać więcej informacji na temat obsługi pikseli. Możesz też sprawdzić ich kod pod kątem tagu <noscript>. Jeśli dostawca obsługuje piksele, często umieszczaj je w tagu <noscript>.

Alternatywy dla pikseli

Piksele stały się popularne głównie dlatego, że w przeszłości były jednym z najtańszych i najbardziej niezawodnych sposobów wysyłania żądań HTTP w sytuacjach, gdy odpowiedź serwera jest nieistotna ( np. przy wysyłaniu danych do usług analitycznych). Interfejsy API navigator.sendBeacon() i fetch() keepalive zostały zaprojektowane pod kątem tego samego przypadku użycia, ale są prawdopodobnie bardziej niezawodne niż piksele.

W dalszym korzystaniu z pikseli nie ma nic złego – są one dobrze obsługiwane i mają minimalny wpływ na wydajność. Jeśli jednak tworzysz własne beacony, warto rozważyć użycie jednego z tych interfejsów API.

sendBeacon()

Interfejs API navigator.sendBeacon() został zaprojektowany do wysyłania niewielkich ilości danych do serwerów WWW w sytuacjach, gdy odpowiedź serwera nie ma znaczenia.

const url = "https://example.com/analytics";
const data = JSON.stringify({
    event: "checkout",
    time: performance.now()
});

navigator.sendBeacon(url, data);

sendBeacon() ma ograniczony interfejs API: obsługuje tylko tworzenie żądań POST i nie umożliwia ustawiania niestandardowych nagłówków. Jest obsługiwana przez wszystkie nowoczesne przeglądarki.

fetch() keepalive

keepalive to flaga umożliwiająca korzystanie z interfejsu Fetch API do wysyłania żądań nieblokujących, takich jak raportowanie i analiza zdarzeń. Jest on używany przez uwzględnienie parametru keepalive: true w parametrach przekazywanych do fetch().

const url = "https://example.com/analytics";
const data = JSON.stringify({
  event: "checkout",
  time: performance.now()
});

fetch(url, {
    method: 'POST',
    body: data,
    keepalive: true
});

Jeśli właściwości fetch() keepalive i sendBeacon() wydają się bardzo podobne, to dlatego, że są. W przeglądarkach Chromium sendBeacon() został utworzony na bazie fetch() keepalive.

Wybierając między fetch() keepalive a sendBeacon(), weź pod uwagę funkcje i obsługę przeglądarki, których będziesz potrzebować. Interfejs Download() API jest znacznie bardziej elastyczny, ale keepalive ma mniej możliwości obsługi przeglądarek niż sendBeacon().

Uzyskaj wyjaśnienie

Tagi są często tworzone według wskazówek dostawców zewnętrznych. Jeśli nie masz pewności, jak działa kod dostawcy, zapytaj o to osobę, która się na tym zna. Uzyskanie dodatkowej opinii może pomóc w określeniu, czy tag może powodować problemy z wydajnością lub bezpieczeństwem.

Zalecane jest też oznaczenie tagami tagów właściciela w Menedżerze tagów. Zbyt łatwo jest zapomnieć, kto jest właścicielem tagu, i bać się go usunąć na wszelki wypadek.

Aktywatory

Ogólnie rzecz biorąc, optymalizacja reguł związanych z tagami polega na pilnowaniu, aby tagi nie uruchamiały się częściej, niż jest to konieczne, oraz o wybraniu reguły, która zrównoważy potrzeby biznesowe z kosztami ich skuteczności.

Same reguły są kodem JavaScript, który zwiększa rozmiar – i koszty wykonania – Menedżera tagów. Chociaż większość reguł jest niewielka, skumulowane efekty mogą być większe. Wiele na przykład zdarzeń kliknięcia lub reguł licznika czasu może znacznie zwiększyć obciążenie menedżera tagów.

Wybierz odpowiednie zdarzenie aktywujące

Wpływ na wydajność tagu nie jest stały. Ogólnie rzecz biorąc, im wcześniej tag zostanie uruchomiony, tym większy będzie jego wpływ na wydajność. Zasoby są zazwyczaj ograniczone podczas początkowego wczytywania strony, więc załadowanie lub wykonanie konkretnego zasobu (lub tagu) zabiera zasoby z innego miejsca.

Wybór odpowiednich reguł dla wszystkich tagów jest ważny, ale jest to szczególnie ważne w przypadku tagów, które wczytują duże zasoby lub wykonują długie skrypty.

Tagi mogą być uruchamiane podczas wyświetleń strony (zwykle Page load, DOM Ready, Window Loaded) lub na podstawie zdarzenia niestandardowego. Aby uniknąć wpływu na wczytywanie strony, zalecamy uruchamianie tagów innych niż kluczowe po Window Loaded.

Używanie zdarzeń niestandardowych

Zdarzenia niestandardowe umożliwiają uruchamianie reguł w odpowiedzi na zdarzenia na stronie, których nie obejmują reguły Menedżera tagów Google. Na przykład wiele tagów korzysta z reguł wyświetlenia strony. Na wielu stronach okres między DOM Ready a Window Loaded może być jednak długi i utrudni to dostosowanie ustawień uruchomienia tagu. Zdarzenia niestandardowe pomagają rozwiązać ten problem.

Aby używać zdarzeń niestandardowych, najpierw utwórz regułę zdarzenia niestandardowego i zaktualizuj swoje tagi, tak aby z niej korzystać.

Aby uruchomić regułę, przekaż odpowiednie zdarzenie na warstwę danych.

// Custom event trigger that fires after 2 seconds
setTimeout(() => {
  dataLayer.push({
    'event' : 'my-custom-event'
  });
}, 2000);

Użyj określonych warunków aktywatora

Użycie określonych warunków reguły pomaga uniknąć niepotrzebnego uruchamiania tagu. Chociaż można zastosować tę koncepcję na wiele sposobów, jedną z najprostszych i najbardziej przydatnych rzeczy, które możesz zrobić, jest zadbanie o to, aby tag uruchamiał się tylko na stronach, na których jest rzeczywiście używany.

W warunkach reguł można też uwzględnić zmienne wbudowane, by ograniczyć uruchamianie tagów.

Pamiętaj jednak, że stosowanie złożonych warunków reguły lub wyjątków wymaga czasu przetwarzania, dlatego nie należy tworzyć ich zbyt złożonych.

Wczytywanie menedżera tagów w odpowiednim momencie

Dostosowanie czasu wczytywania Menedżera tagów może mieć znaczny wpływ na skuteczność. Reguły, niezależnie od tego, jak są skonfigurowane, nie mogą być uruchamiane, dopóki menedżer tagów nie zostanie wczytany. Wybór dobrych reguł dla poszczególnych tagów (jak wyjaśniliśmy powyżej) jest bardzo ważny, ale eksperymentowanie z czasem wczytywania menedżera tagów może mieć taki sam lub większy wpływ na skuteczność wszystkich tagów na stronie.

Późniejsze wczytanie Menedżera tagów zapewnia też dodatkową warstwę kontroli i umożliwia uniknięcie problemów z wydajnością w przyszłości, ponieważ zapobiega jego przypadkowemu wczytywaniu przez użytkownika zbyt wcześnie i nie zdaje sobie sprawy, jakie może to mieć skutki.

Zmienne

Zmienne umożliwiają odczyt danych ze strony. Są przydatne w regułach i w tagach.

Podobnie jak reguły, zmienne dodają kod JavaScript do Menedżera tagów, co może powodować problemy z wydajnością. Zmienne mogą być stosunkowo prostymi typami wbudowanymi, które potrafią np. odczytywać części adresu URL, pliki cookie, warstwę danych lub DOM. Może to też być niestandardowy kod JavaScript, który praktycznie nie ma ograniczeń.

Zachowaj prostotę i ogranicz ją do minimum, ponieważ muszą one być stale oceniane przez menedżera tagów. Usuń stare zmienne, które nie są już używane do zmniejszenia zarówno rozmiaru skryptu Menedżera tagów, jak i czasu przetwarzania.

Zarządzanie tagami

Właściwe używanie tagów zmniejszy ryzyko problemów z wydajnością.

Korzystanie z warstwy danych

Warstwa danych „zawiera wszystkie informacje, które chcesz przekazać do Menedżera tagów Google”. Dokładniej rzecz ujmując, jest to tablica JavaScriptu z obiektami zawierającymi informacje o stronie. Może też służyć do wywoływania tagów.

// Contents of the data layer
window.dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];

// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});

// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});

Chociaż Menedżera tagów Google można używać bez warstwy danych, zdecydowanie zalecamy jego stosowanie. Warstwa danych umożliwia skonsolidowanie w jednym miejscu danych, do których uzyskują dostęp skrypty innych firm, i zapewnia lepszy wgląd w ich wykorzystanie. Może to m.in. ograniczyć nadmiarowe obliczenia zmiennych i wykonywanie skryptów. Korzystanie z warstwy danych umożliwia też kontrolowanie danych, do których tagi mają dostęp, a nie zapewnia pełny dostęp do zmiennych JavaScriptu czy modelu DOM.

Usuń zduplikowane i nieużywane tagi

Gdy tagi zostaną umieszczone w znacznikach HTML strony, a jednocześnie wstrzyknięty przez menedżera tagów, mogą wystąpić zduplikowane tagi.

Nieużywane tagi należy wstrzymać lub usunąć, zamiast blokować za pomocą wyjątku od reguły. Wstrzymanie lub usunięcie tagu powoduje usunięcie kodu z kontenera. Blokowanie nie działa.

Po usunięciu nieużywanych tagów należy też sprawdzić reguły i zmienne, aby zobaczyć, czy któreś z nich można usunąć, jeśli były używane tylko przez te tagi.

Korzystanie z list dozwolonych i odrzuconych

Listy dozwolonych i odrzuconych umożliwiają konfigurowanie bardzo szczegółowych ograniczeń dotyczących tagów, reguł i zmiennych dozwolonych na stronie. Może pomóc Ci egzekwować sprawdzone metody dotyczące wydajności i inne zasady.

Listy dozwolonych i odrzuconych są konfigurowane w warstwie danych.

window.dataLayer = [{
  'gtm.allowlist': ['<id>', '<id>', ...],
  'gtm.blocklist': ['customScripts']
}];

Na przykład może być zabronione korzystanie z niestandardowych tagów HTML, zmiennych JavaScriptu ani bezpośredniego dostępu do modelu DOM. Oznacza to, że można używać tylko pikseli i wstępnie zdefiniowanych tagów, w tym danych z warstwy danych. Chociaż jest to z pewnością bardzo restrykcyjne, może pomóc w skuteczniejszym i bezpieczniejszym wdrożeniu Menedżera tagów.

Rozważ użycie tagowania po stronie serwera

Przejście na tagowanie po stronie serwera nie jest prostą czynnością, ale warto ją przemyśleć – zwłaszcza w przypadku większych witryn, które chcą mieć większą kontrolę nad swoimi danymi. Tagowanie po stronie serwera usuwa kod dostawcy z klienta i przenosi przetwarzanie z klienta na serwer.

Na przykład w przypadku tagowania po stronie klienta wysyłanie danych na wiele kont Analytics oznacza, że klient inicjuje osobne żądania dla każdego punktu końcowego. Natomiast w przypadku tagowania po stronie serwera klient wysyła jedno żądanie do kontenera po stronie serwera, a następnie przekazuje te dane na różne konta Analytics.

Pamiętaj, że tagowanie po stronie serwera działa tylko z niektórymi tagami. Zgodność tagów różni się w zależności od dostawcy.

Więcej informacji znajdziesz w artykule Wprowadzenie do tagowania po stronie serwera.

Kontenery

Menedżer tagów zazwyczaj dopuszcza w swojej konfiguracji wiele instancji lub „kontenerów”. Dzięki temu z poziomu jednego konta menedżera tagów można zarządzać wieloma kontenerami.

Używaj tylko jednego kontenera na stronę

Stosowanie wielu containers na jednej stronie może powodować poważne problemy z wydajnością, ponieważ wiąże się z dodatkowymi narzutami i wykonywaniem skryptów. Jest to przynajmniej kluczowy kod tagu, którego nie można używać ponownie w różnych kontenerach, ponieważ jest on częścią kodu JavaScriptu kontenera.

Rzadko się zdarza, aby wiele kontenerów było skutecznie używanych. Mogą jednak wystąpić sytuacje, w których może się to udać – przy odpowiednim kontrolowaniu – na przykład:

• Kontenery o lżejszym „wcześniejszym wczytywaniu” i większym kontenerze „później wczytywane” niż w przypadku jednego dużego kontenera.
• Kontenery na potrzeby tagów, których nie można używać w kontenerze z ograniczonym dostępem, czyli kontenera z ograniczonym dostępem, z którego korzystają mniej techniczni użytkownicy.

Jeśli chcesz używać wielu kontenerów na stronie, postępuj zgodnie ze wskazówkami Menedżera tagów Google dotyczącymi konfigurowania wielu kontenerów.

W razie potrzeby użyj oddzielnych kontenerów

Jeśli używasz Menedżera tagów w przypadku wielu usług (np. aplikacji internetowej i aplikacji mobilnej), liczba używanych kontenerów może zwiększyć produktywność lub usprawnić przepływ pracy. Może też wpływać na wydajność.

Ogólnie rzecz biorąc, jeden kontener może być skutecznie wykorzystywany w wielu witrynach o podobnej strukturze i użytkowaniu. Na przykład aplikacje mobilne i internetowe marki mogą pełnić podobne funkcje, ale jest prawdopodobne, że będą miały inną strukturę i będą bardziej zarządzane w oddzielnych kontenerach.

Próby ponownego wykorzystania 1 kontenera zwykle niepotrzebnie zwiększają złożoność i rozmiar kontenera, wymuszając stosowanie złożonej logiki do zarządzania tagami i regułami.

Zwróć uwagę na rozmiar kontenera

Rozmiar kontenera zależy od jego tagów, reguł i zmiennych. Mały kontener może nadal negatywnie wpływać na wydajność strony, ale duży kontener z pewnością będzie miał taki wpływ.

Podczas optymalizowania użycia tagu rozmiar kontenera nie powinien być wyznacznikiem gwiazdy północnej. Duży rozmiar kontenera to często sygnał ostrzegawczy, że kontener nie jest dobrze zarządzany i może być niewłaściwie wykorzystywany.

Menedżer tagów Google ogranicza rozmiar kontenera do 200 KB i wyświetla ostrzeżenie, gdy rozmiar kontenera zaczyna się już od 140 KB. Większość witryn powinna jednak dążyć do tego, aby kontenery były znacznie mniejsze. Mediana kontenera witryny wynosi około 50 KB.

Aby określić rozmiar kontenera, sprawdź rozmiar odpowiedzi zwracanej przez funkcję https://www.googletagmanager.com/gtag/js?id=YOUR_ID. Ta odpowiedź zawiera bibliotekę Menedżera tagów Google i zawartość kontenera. Sama biblioteka Menedżera tagów Google ma ok. 33 KB skompresowana.

Nazwij wersje kontenera

Wersja kontenera to migawka zawartości kontenera w konkretnym momencie. Użycie nazwy i krótkiego opisu istotnych zmian może znacznie ułatwić debugowanie przyszłych problemów z wydajnością.

Procesy tagowania

Zarządzanie zmianami tagów jest ważne, ponieważ dzięki temu nie wpływają one negatywnie na wydajność strony.

Przetestuj tagi przed wdrożeniem

Testowanie tagów przed wdrożeniem może pomóc w wykryciu problemów (z wydajnością i innym działaniem) przed ich wysłaniem.

Podczas testowania tagu należy wziąć pod uwagę te kwestie:

• Czy tag działa prawidłowo?
• Czy tag powoduje przesunięcia układu?
• Czy tag wczytuje zasoby? Jak duże są te zasoby?
• Czy tag uruchamia długo działający skrypt?

Tryb podglądu

Tryb podglądu pozwala testować zmiany tagów w swojej witrynie bez konieczności ich publicznego wdrażania. Tryb podglądu obejmuje konsolę debugowania zawierającą informacje o tagach.

Czas wykonywania Menedżera tagów Google będzie się różnić (nieco wolniej) po uruchomieniu w trybie podglądu ze względu na dodatkowe koszty wymagane do udostępnienia informacji w konsoli debugowania. Dlatego nie zalecamy porównywania pomiarów wskaźników internetowych zgromadzonych w trybie podglądu z danymi gromadzonymi w narzędziu produkcyjnym. Ta rozbieżność nie powinna jednak wpłynąć na działanie tagów.

Samodzielne testowanie

Alternatywnym sposobem testowania tagów jest skonfigurowanie pustej strony zawierającej kontener z jednym tagiem, który testujesz. Taka konfiguracja testowania jest mniej realistyczna i nie wykrywa niektórych problemów (np. tego, czy tag powoduje przesunięcia układu), ale może ułatwić wyodrębnienie i pomiar wpływu tagu na takie elementy jak wykonanie skryptu. Sprawdź, jak Telegraph wykorzystuje tę metodę izolacji do poprawy wydajności kodu zewnętrznego.

Monitorowanie skuteczności tagów

Interfejs Monitoring API Menedżera tagów Google może służyć do zbierania informacji o czasie wykonania danego tagu. Ta informacja jest przesyłana do wybranego przez Ciebie punktu końcowego.

Więcej informacji znajdziesz w artykule Jak utworzyć monitorowanie Menedżera tagów Google.

Wymagaj zatwierdzenia zmian w kontenerze

Kod własny jest zwykle sprawdzany i testowany przed wdrożeniem – tagi należy traktować tak samo. Jednym ze sposobów jest dodanie weryfikacji dwuetapowej, która wymaga zatwierdzenia przez administratora zmian w kontenerze. Jeśli nie chcesz wymagać weryfikacji dwuetapowej, ale nadal chcesz obserwować zmiany, możesz skonfigurować powiadomienia o kontenerach, aby otrzymywać alerty e-mail o wybranych zdarzeniach kontenera.

Okresowa kontrola użycia tagów

Jednym z wyzwań w pracy z tagami jest to, że mają one tendencję do gromadzenia się w czasie. Są one dodawane, ale rzadko usuwane. Okresowa kontrola tagów to jeden ze sposobów odwrócenia tego trendu. Idealna częstotliwość takiej czynności zależy od tego, jak często aktualizowane są tagi w witrynie.

Oznaczenie każdego tagu w taki sposób, by jego właściciel był oczywisty, ułatwia identyfikowanie użytkowników odpowiedzialnych za dany tag i pozwala określić, czy jest on nadal potrzebny.

Kontrolując tagi, nie zapomnij też wyczyścić reguł i zmiennych. Mogą też być przyczyną problemów z wydajnością.

Więcej informacji znajdziesz w artykule o utrzymywaniu kontroli nad skryptami innych firm.