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

Opublikowano: 29 lipca 2021 r.

Tagi to fragmenty kodu zewnętrznego umieszczane w witrynie, zwykle za pomocą Menedżera tagów. Tagi są najczęściej używane do celów marketingowych i analitycznych.

Wpływ tagów i menedżerów tagów na skuteczność jest bardzo różny w zależności od witryny. Menedżera tagów można porównać do koperty: zapewnia on pojemnik, ale to, czym go wypełnisz i jak go użyjesz, 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 podstawowych wskaźników internetowych. Chociaż dokument ten odnosi się do Menedżera tagów Google, wiele z omawianych pomysłów można zastosować w przypadku innych menedżerów tagów.

Wpływ na podstawowe wskaźniki internetowe

Menedżery tagów często wpływają pośrednio na podstawowe wskaźniki internetowe, ponieważ zużywają zasoby potrzebne do szybkiego wczytywania strony i utrzymywania jej responsywności. Przepustowość może być zużywana na pobieranie kodu JavaScript menedżera tagów dla Twoich witryn lub na wywołania, które on wykonuje. Czas pracy procesora w wątku głównym można przeznaczyć na ocenę i wykonywanie kodu JavaScript zawartego w menedżerze tagów i tagach.

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

Na skumulowane przesunięcie układu (CLS) może mieć wpływ opóźnienie wczytania kluczowych zasobów przed pierwszym renderowaniem lub przez menedżerów tagów wstrzykiwanie treści na stronie.

Interakcja do kolejnego wyrenderowania (INP) jest podatna na rywalizację o zasoby procesora w głównym wątku. Zauważyliśmy też korelację między rozmiarem menedżera tagów a gorszymi wynikami INP.

Wybór odpowiedniego typu tagu

Wpływ tagów na skuteczność zależy od typu tagu. Ogólnie rzecz biorąc, tagi graficzne („piksele”) są najbardziej wydajne, a zaraz po nich idą szablony niestandardowe i na końcu tagi HTML niestandardowe. Tagi dostawców różnią się w zależności od funkcji, które umożliwiają.

Pamiętaj, że sposób użycia tagu ma duży wpływ na jego skuteczność. Tagi „piksele” mają dużą wydajność głównie dlatego, że ich charakter nakłada rygorystyczne ograniczenia na ich wykorzystanie. Niestandardowe tagi HTML nie zawsze negatywnie wpływają na wydajność, ale dzięki swobodom, jakie zapewniają użytkownikom, mogą być łatwe w użyciu i niekorzystnie wpływać na wydajność.

Gdy myślisz o tagach, pamiętaj o skali: wpływ pojedynczego tagu na wydajność może być znikomy, ale może być znaczący, gdy na stronie jest umieszczonych dziesiątki lub setki tagów.

Nie wszystkie skrypty powinny być wczytywane przez menedżera tagów

Menedżery tagów zwykle nie są najlepszym sposobem ładowania zasobów, które implementują natychmiastowe lub funkcjonalne aspekty wygody użytkowników, takie jak powiadomienia o plikach cookie, główne obrazy czy funkcje witryny. Używanie Menedżera tagów do wczytywania tych zasobów zwykle opóźnia ich dostarczanie. Wpływa to negatywnie na wrażenia użytkownika i może zwiększać wskaźniki takie jak LCP i CLS.

Oprócz tego niektórzy użytkownicy blokują menedżery tagów. Korzystanie z Menedżera tagów do implementowania funkcji UX może spowodować, że witryna nie będzie działać prawidłowo dla niektórych użytkowników.

Używanie niestandardowych tagów HTML

Tagi HTML niestandardowe istnieją od wielu lat i są często używane w większości witryn. Tagi niestandardowe HTML umożliwiają wprowadzanie własnego kodu z niewielkimi ograniczeniami, ponieważ pomimo nazwy głównym zastosowaniem tego tagu jest dodawanie do strony niestandardowych elementów <script>.

Niestandardowe tagi HTML można stosować na wiele różnych sposobów, a ich wpływ na skuteczność reklam jest bardzo zróżnicowany. Pamiętaj, że podczas pomiaru wydajności witryny większość narzędzi przypisuje wpływ na wydajność tagu niestandardowego HTML do menedżera tagów, który go wprowadził, a nie do samego tagu.

Tworzenie tagu niestandardowego w Menedżerze tagów Google

Tagi HTML niestandardowe mogą wstawiać elementy na stronie. Wstawianie elementów na stronie może być źródłem problemów z wydajnością, a w niektórych przypadkach spowodować też 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. Ten proces nazywa się layoutem. Wpływ pojedynczego układu na wydajność jest minimalny, ale gdy występuje nadmiernie, może stać się źródłem problemów z wydajnością. Ten zjawisko ma większe znaczenie w przypadku urządzeń niższej klasy i stron z dużą liczbą elementów DOM.
  • Jeśli widoczny element strony zostanie wstawiony do modelu DOM po renderowaniu otaczającego obszaru, może to spowodować przesunięcie układu. To zjawisko nie występuje tylko w przypadku menedżerów tagów. Ponieważ jednak tagi wczytują się później niż inne części strony, często zdarza się, że są wstawiane do modelu DOM już po wyrenderowaniu otaczającej ich strony.

Korzystanie z szablonów niestandardowych

Szablony niestandardowe obsługują niektóre z tych samych operacji co tagi niestandardowe HTML, ale są tworzone na podstawie wersji JavaScript w piaskownicy, która udostępnia interfejsy API do częstych zastosowań, takich jak wstrzykiwanie skryptu i wstrzykiwanie piksela. Jak wskazuje ich nazwa, umożliwiają one tworzenie szablonów przez zaawansowanych użytkowników, którzy mogą je tworzyć z myślą o wydajności. Dzięki temu mniej doświadczeni użytkownicy mogą korzystać z szablonu. Jest to często bezpieczniejsze niż przyznanie pełnego dostępu do niestandardowego kodu HTML.

Ze względu na większe ograniczenia nakładane na szablony niestandardowe te tagi mają znacznie mniejsze szanse na wystąpienie problemów z wydajnością lub bezpieczeństwem. Z tych samych powodów szablony niestandardowe nie sprawdzają się we wszystkich przypadkach.

Szablon niestandardowy w Menedżerze tagów Google

Prawidłowe wstrzykiwanie skryptów

Używanie menedżera tagów do wstrzykiwania skryptu jest bardzo częstym przypadkiem użycia. Zalecane jest użycie szablonu niestandardowego i interfejsu API injectScript.

Więcej informacji o konwertowaniu istniejącego tagu niestandardowego HTML za pomocą interfejsu injectScript API znajdziesz w artykule Konwertowanie istniejącego tagu.

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

  • Biblioteki i duże skrypty firm zewnętrznych powinny być wczytywane za pomocą tagu skryptu (np. <script src="external-scripts.js">), który pobiera plik zewnętrzny, a nie poprzez bezpośrednie kopiowanie zawartości skryptu do tagu. Chociaż rezygnacja z tagu <script> eliminuje konieczność osobnego wczytania kodu, zwiększa rozmiar kontenera i uniemożliwia przeglądarce zapisanie kodu w oddzielnej pamięci podręcznej.
  • Wielu dostawców zaleca umieszczanie tagu <script> u góry strony <head>. W przypadku skryptów wczytywanych przez menedżera tagów jest to jednak często niepotrzebne. W większości przypadków przeglądarka kończy analizowanie parametru <head> przed uruchomieniem Menedżera tagów.

Użyj pikseli

Czasami skrypty innych firm można zastąpić pikselami obrazu lub iframe. W porównaniu z ich odpowiednikami opartymi na skryptach piksele mogą obsługiwać mniej funkcji, dlatego często są postrzegane jako mniej korzystna implementacja. Jednak gdy są używane w menedżerach tagów, piksele mogą być bardziej dynamiczne, ponieważ mogą działać na podstawie reguł i przekazywać różne zmienne.

Pliki PIXEL to najskuteczniejszy i najbezpieczniejszy typ tagu, ponieważ po jego wywołaniu nie jest wykonywany żaden kod JavaScript. Piksel ma bardzo mały rozmiar zasobu (mniej niż 1 KB) i nie powoduje przesunięcia układu.

Aby uzyskać więcej informacji o obsługiwanych przez niego urządzeniach, skontaktuj się z dostawcą zewnętrznym. Możesz też sprawdzić kod, aby zobaczyć tag <noscript>. Jeśli dostawca obsługuje piksele, często umieszcza je w tagu <noscript>.

Niestandardowy tag graficzny w Menedżerze tagów Google

Alternatywy dla pikseli

Piksele stały się popularne głównie dlatego, że przez pewien czas były jednym z najtańszych i najbardziej niezawodnych sposobów wysyłania żądań HTTP w sytuacjach, gdy odpowiedź serwera nie ma znaczenia (np. podczas wysyłania danych do dostawców usług analitycznych). Interfejsy API navigator.sendBeacon() i fetch() keepalive są przeznaczone do tego samego zastosowania, ale są prawdopodobnie bardziej niezawodne niż piksele.

Nie ma nic złego w dalszym korzystaniu z pikseli – 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 navigator.sendBeacon() API jest przeznaczony do wysyłania niewielkich ilości danych na serwery 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 żądania POST i nie obsługuje ustawiania nagłówków niestandardowych. Jest obsługiwana przez wszystkie nowoczesne przeglądarki.

Fetch API keepalive

keepalive to flaga, która umożliwia korzystanie z interfejsu Fetch API do wysyłania nieblokujących żądań, takich jak raportowanie zdarzeń i statystyki. Używa się go, dodając 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 fetch() keepalivesendBeacon() wydają się bardzo podobne, to dlatego, że takie są. W przeglądarkach Chromium sendBeacon() jest teraz oparte na fetch() keepalive.

Wybierając między fetch() keepalive a sendBeacon(), weź pod uwagę potrzebne funkcje i obsługę przeglądarki. Interfejs download() API jest znacznie bardziej elastyczny, jednak keepalive ma mniejszą obsługę niż sendBeacon().

Jak działają tagi

Tagi są często tworzone zgodnie ze wskazówkami podanymi przez zewnętrznego dostawcę. Jeśli nie wiesz, do czego służy kod dostawcy, poproś o pomoc kogoś, kto zna odpowiedź. Druga opinia może pomóc w określeniu, czy tag może powodować problemy z wydajnością lub bezpieczeństwem.

Zalecamy oznaczanie tagów jako właściciela w Menedżerze tagów. Łatwo zapomnieć, kto jest właścicielem tagu, co prowadzi do obaw przed jego usunięciem, jeśli coś się zepsuje.

Reguły

Ogólnie rzecz biorąc, optymalizacja wyzwalania tagów polega na tym, aby nie wywoływać tagów częściej niż to konieczne, i wybrać taki ich rodzaj, który zapewni równowagę między potrzebami firmy a kosztami skuteczności.

Reguły to kod JavaScript, który zwiększa rozmiar i koszty działania Menedżera tagów. Chociaż większość wyzwalaczy ma niewielki wpływ, ich kumulowany efekt może być znaczny. Na przykład większa liczba zdarzeń kliknięcia lub reguł działania typu timer może znacznie zwiększyć obciążenie menedżera tagów.

Wybierz odpowiednie zdarzenie aktywujące

Wpływ tagu na skuteczność może się różnić. Ogólnie rzecz biorąc, im wcześniej tag zostanie uruchomiony, tym bardziej wpływa na wydajność. Zasoby są zwykle ograniczone podczas początkowego wczytywania strony, dlatego wczytanie lub wykonanie konkretnego zasobu (lub tagu) odbiera zasoby od czegoś innego.

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

Tagi mogą być uruchamiane po wyświetleniu strony (zwykle Page load, on DOM Ready, on Window Loaded) lub na podstawie zdarzenia niestandardowego. Aby uniknąć wpływu na wczytywanie strony, uruchom tagi nieistotne po tagu Window Loaded.

Korzystanie ze zdarzeń niestandardowych

Za pomocą zdarzeń niestandardowych możesz uruchamiać reguły w odpowiedzi na zdarzenia na stronie, których nie mają wbudowane reguły Menedżera tagów Google. Na przykład wiele tagów używa działań typu odsłona. Czas między DOM ReadyWindow Loaded może jednak być długi, co utrudnia dokładne określenie momentu uruchomienia tagu. Zdarzenia niestandardowe mogą pomóc w rozwiązaniu tego problemu.

Najpierw utwórz niestandardowy aktywator zdarzeń, a potem zaktualizuj tagi, aby używać tego aktywatora.

Reguła zdarzenia niestandardowego w Menedżerze tagów Google

Aby wywołać czynnik uruchamiający, przekaż odpowiednie zdarzenie do warstwy danych.

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

Używanie określonych warunków reguły

Określ konkretne warunki reguł, aby uniknąć uruchamiania tagów, gdy nie jest to konieczne. Jednym z najprostszych i skuteczniejszych sposobów jest zadbanie o to, aby tag uruchamiał się tylko na stronach, na których jest faktycznie używany.

Warunki reguł w Menedżerze tagów Google

Zmiennych wbudowanych można używać w warunkach reguły, aby ograniczyć uruchamianie tagu.

Włacz Menedżera tagów w odpowiednim momencie

Skuteczność możesz zwiększyć, dostosowując czas wczytywania menedżera tagów. Reguły, niezależnie od ich konfiguracji, nie mogą być uruchamiane, dopóki nie załaduje się Menedżer tagów. Eksperymentuj z czasem wczytywania menedżera tagów, ponieważ może to mieć równy lub większy wpływ. Ta decyzja ma wpływ na wszystkie tagi na stronie.

Wczytanie Menedżera tagów w późniejszym czasie może zapobiec przyszłym problemom z wydajnością, ponieważ zapobiega przypadkowemu wczytywaniu tagu zbyt wcześnie.

Zmienne

Używaj zmiennych do odczytywania danych ze strony. Są one przydatne w regułach i samych tagach.

Podobnie jak reguły, zmienne dodają do Menedżera tagów kod JavaScriptu, przez co mogą powodować problemy ze skutecznością. Zmienne mogą być stosunkowo małe, np. kod do odczytywania części adresu URL, plików cookie, warstwy danych lub interfejsu DOM. Mogą też zawierać niestandardowy kod JavaScript o nieograniczonych możliwościach (i rozmiarze).

Zminimalizuj użycie zmiennych, ponieważ są one stale oceniane przez Menedżera tagów. Usuń stare zmienne, których już nie używasz, aby zmniejszyć rozmiar skryptu Menedżera tagów i czas przetwarzania.

Zarządzanie tagami

Używanie tagów efektywnie zmniejsza ryzyko problemów z wydajnością.

Korzystanie z warstwy danych

Warstwa danych to tablica obiektów JavaScriptu zawierająca informacje o stronie. Obiekty te zawierają wszystkie informacje, które chcesz przekazać do Menedżera tagów Google.

Warstwy danych można też używać do uruchamiania 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 jej stosowanie. Warstwę danych konsoliduje dane, do których skrypty innych firm mogą mieć dostęp, w jednym miejscu, co zapewnia lepszą widoczność ich wykorzystania. Pomoże to między innymi ograniczyć zbędne obliczenia zmiennych i wykonywanie skryptu.

Dzięki warstwie danych możesz kontrolować, do jakich danych mają dostęp tagi, zamiast przyznawać im pełny dostęp do zmiennej JavaScript lub DOM.

Korzyści z podniesienia skuteczności dzięki warstwie danych mogą nie być oczywiste, ponieważ jej zaktualizowanie powoduje, że Menedżer tagów Google ponownie ocenia wszystkie zmienne kontenera i może też wywołać tagi, co wiąże się z wykonywaniem kodu JavaScript. Chociaż można niewłaściwie używać warstwy danych, ogólnie rzecz ujmując, jeśli wydaje się, że to właśnie ona jest źródłem problemów z wydajnością, prawdopodobnie sam kontener ma problemy z wydajnością. Warstwa danych sprawia, że problemy te stają się bardziej widoczne.

Usuń zduplikowane i nieużywane tagi

Duplikaty tagów mogą występować, gdy tag jest uwzględniony w oznaczeniu HTML strony oprócz tego, że jest wstrzykiwany przez menedżera tagów.

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

Po usunięciu nieużywanych tagów sprawdź reguły i zmienne, by sprawdzić, czy one również można usunąć.

Wstrzymane tagi wpływają na rozmiar kontenera, ale łączny ładunek jest mniejszy niż wtedy, gdy tagi są aktywne.

Korzystanie z list dozwolonych i odrzuconych

Użyj list dozwolonych i zabronionych adresów, aby skonfigurować bardzo szczegółowe ograniczenia dotyczące tagów, reguł i zmiennych dozwolonych na stronie. Ułatwia to egzekwowanie sprawdzonych metod wydajności i innych zasad.

Listy dozwoleń i zakazów są konfigurowane w warstwie danych.

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

Możesz na przykład zablokować korzystanie z niestandardowych tagów HTML, zmiennych JavaScript lub bezpośredniego dostępu do modelu DOM. Oznacza to, że można używać tylko pikseli i tagów wstępnie zdefiniowanych z danymi z warstwy danych. Chociaż jest to ograniczenie, może ono zaowocować większą wydajnością i bezpieczeństwem wdrożenia menedżera tagów.

Zastanów się nad tagowaniem po stronie serwera

Warto rozważyć przejście na tagowanie po stronie serwera, 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, a w efekcie przenosi przetwarzanie z klienta na serwer.

Na przykład podczas korzystania z tagowania po stronie klienta wysyłanie danych do wielu kont Analytics powoduje, że klient inicjuje oddzielne żądania dla każdego punktu końcowego. W przypadku tagowania po stronie serwera klient wysyła jedno żądanie do kontenera po stronie serwera, skąd te dane są przekazywane do różnych kont Analytics.

Pamiętaj, że tagowanie po stronie serwera działa tylko w przypadku niektórych tagów. Zgodność tagów zależy od dostawcy.

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

Kontenery

Menedżery tagów zwykle umożliwiają tworzenie wielu instancji, które często nazywane są kontenerami. Na jednym koncie Menedżera tagów możesz zarządzać wieloma kontenerami.

Używaj tylko jednego kontenera na stronę.

Wiele kontenerów na jednej stronie może spowodować poważne problemy z wydajnością, ponieważ powoduje dodatkowe obciążenie i wykonanie skryptu. W najgorszym razie zduplikuje kod głównego tagu, który jest dostarczany jako część kodu JavaScript kontenera i nie może być używany ponownie w innych kontenerach.

Rzadko zdarza się, aby kilka kontenerów było skutecznie wykorzystywanych. Są jednak sytuacje, w których może to zadziałać, o ile jest dobrze kontrolowane. Na przykład:

  • Uwzględnij lżejszy kontener „early load” i cięższy kontener „later load”, a nie jeden duży kontener.
  • Użycie kontenera z ograniczeniami dla mniej zaawansowanych użytkowników oraz kontenera mniej ograniczonego, ale bardziej precyzyjnego, na potrzeby bardziej złożonych tagów.

Jeśli musisz używać na stronie wielu kontenerów, postępuj zgodnie z instrukcjami 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 przez Ciebie kontenerów może mieć wpływ na wydajność Twojego procesu. Może to też wpłynąć na skuteczność.

Jeden kontener może być skutecznie używany na wielu stronach, jeśli są one podobne pod względem użytkowania i struktury. Na przykład aplikacje mobilne i internetowe danej marki mogą pełnić podobne funkcje, ale prawdopodobnie mają inną strukturę, dzięki czemu można nimi skuteczniej zarządzać w ramach oddzielnych kontenerów.

Zbyt częste używanie jednego kontenera może zwiększyć złożoność i rozmiar kontenera, ponieważ wymaga stosowania skomplikowanej logiki do zarządzania tagami i wyzwalaczami.

Zwróć uwagę na rozmiar kontenera

Rozmiar kontenera zależy od jego tagów, reguł i zmiennych. Chociaż mały kontener może mieć negatywny wpływ na wydajność strony, duży kontener prawie na pewno będzie miał taki wpływ.

Rozmiar kontenera nie powinien być najważniejszym wskaźnikiem optymalizacji wykorzystania tagu. Jednak duży rozmiar kontenera często ostrzega, że nie jest dobrze utrzymany i może być niewłaściwie używany.

Menedżer tagów Google ogranicza rozmiar kontenera do 300 KB i ostrzega o jego rozmiarze, gdy osiągnie 70% limitu.

Większość witryn powinna starać się, aby ich kontenery były mniejsze niż limit. Dla porównania, średni kontener witryny ma około 50 KB. Biblioteka Menedżera tagów Google zajmuje po skompresowaniu około 33 KB.

Nazywanie wersji kontenera

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

Tagowanie przepływów pracy

Ważne jest, aby zarządzać zmianami w tagach, tak aby nie wpłynęły one negatywnie na wydajność strony.

Testowanie przed wdrożeniem

Przetestuj tagi przed wdrożeniem, aby wykryć problemy i inne błędy, zanim zostaną one udostępnione.

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

  • Czy tag działa prawidłowo?
  • Czy tag powoduje przesunięcie układu?
  • Czy tag wczytuje jakieś zasoby? Jak duże są te zasoby?
  • Czy tag uruchamia długotrwały skrypt?

Tryb podglądu

Tryb podglądu umożliwia testowanie zmian w tagach w rzeczywistej witrynie bez konieczności ich wcześniejszego wdrażania w witrynie publicznej. Tryb podglądu obejmuje konsolę debugowania z informacjami o tagach.

Czas wykonywania Menedżera tagów Google jest inny (nieco wolniejszy) w trybie podglądu ze względu na dodatkowy nakład pracy wymagany do udostępniania informacji w konsoli debugowania. Dlatego nie zalecamy porównywania wyników wskaźników Web Vitals uzyskanych w trybie podglądu z tymi uzyskanymi w produkcji. Nie powinna ona jednak wpływać na sposób wykonywania tagów.

Testowanie samodzielne

Alternatywnym podejściem do testowania tagów jest skonfigurowanie pustej strony zawierającej kontener z pojedynczym tagiem, który testujesz. Takie testowanie jest mniej realistyczne i nie pozwala wykryć niektórych problemów (np. czy tag powoduje zmiany układu), ale może ułatwić wyodrębnienie i zmierzenie wpływu tagu na takie kwestie jak wykonywanie skryptu. Dowiedz się, jak Telegram używa tego podejścia do izolacji, aby poprawić wydajność kodu innych firm.

Monitorowanie skuteczności tagów

Interfejs API monitorowania Menedżera tagów Google umożliwia zbieranie informacji o czasie wykonania danego tagu. Te informacje są przekazywane do punktu końcowego wybranego przez Ciebie.

Więcej informacji znajdziesz w artykule Tworzenie monitora Menedżera tagów Google.

Wymagaj zatwierdzenia zmian w kontenerze

Przed wdrożeniem własny kod zwykle jest sprawdzany i testowany. Traktuj tagi 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 mieć oko na zmiany, możesz skonfigurować powiadomienia o kontenerach, aby otrzymywać e-maile z alertami o wybranych zdarzeniach dotyczących kontenerów.

okresowo sprawdzać sposób korzystania z tagów;

Jednym z trudów związanych z pracą z tagami jest to, że z czasem się kumulują – tagi są dodawane, ale rzadko są usuwane. Regularne sprawdzanie tagów to jeden ze sposobów na odwrócenie tego trendu. Optymalna częstotliwość zależy od tego, jak często są aktualizowane tagi witryny.

Oznaczenie każdego tagu tak, aby właściciel był oczywisty, ułatwia identyfikację osoby odpowiedzialnej za dany tag i pozwala określić, czy tag jest nadal potrzebny.

Podczas kontroli tagów pamiętaj o uporządkowaniu reguł i zmiennych. Często są one też przyczyną problemów z wydajnością.

Więcej informacji znajdziesz w artykule Zarządzanie skryptami firm zewnętrznych.