5 sposobów na wykorzystanie Google Tag Managera w SEO

5 sposobów na wykorzystanie Google Tag Managera w SEO

5 sposobów na wykorzystanie Google Tag Managera w SEO

Może nie każdy używa, ale na pewno każdy słyszał o Menedżerze tagów Google, czyli Google Tag Manager (GTM). Dla tych, którzy jednak nie wiedzą, podpowiem, że to darmowe narzędzie internetowego giganta z Mountain View, udostępnione szerszemu gronu w 2015 roku. GTM umożliwia marketerom, content managerom oraz osobom bez specjalistycznej wiedzy programistycznej, zarządzanie oraz instalowanie tzw. tagów lub fragmentów kodu używanych dalej do analizowania ruchu lub marketingu. Ale czy GTM może pomóc w optymalizacji witryny i działaniach SEO? Jak najbardziej.

Gwoli krótkiego wstępu, oto ogólne korzyści wynikające z zastosowania Google Tag Managera to:

  1. Elastyczność i szybkość
    Za pomocą kilku kliknięć możesz samodzielnie dodawać i aktualizować skrypty śledzące, tagi remarketingowe, skrypty ad-serverów, pixele konwersji i wiele innych tagów/kodów. Nie musisz już czekać na aktualizację kodu źródłowego witryny przez dział IT/web-development.
  2. Redukcja kosztów
    Dobry podział pracy i obowiązków to fundament efektywnego działania w każdej branży i dziedzinie. Dzięki odciążeniu działu IT/web-development, może on zająć się realizacją wdrożeń istotnych dla działania funkcjonalności Twojej witryny. Wiadomo czas to pieniądz.
  3. Rzetelne i wiarygodne dane
    Dzięki możliwości szybkiego podglądu i debugowania od razu masz wgląd w działanie tagów i możesz wykryć ewentualne błędy. Masz też pewność, że zbierasz prawidłowe dane, które minimalizują ryzyko podjęcia błędnych decyzji.

Według statystyk SimilarTech na świecie został wdrożony na blisko milionie witryn (w Polsce blisko 40 tys.), a jego udział względem innych systemów zarządzania tagami (np. Adobe Dynamic Tag Manager, Tealium, Signal) sukcesywnie rośnie. Aby zacząć korzystać z GTM wystarczy poznać kilka pojęć (takich jak kontener, tag, reguła etc.) i zasad jego działania. Niemniej jednak nie o tym będzie niniejszy wpis. Osoby zainteresowane podstawową wiedzą odsyłam do oficjalnego supportu narzędzia.

Dzisiaj chciałbym Wam przedstawić 5 sposobów na wykorzystanie Google Tag Managera w SEO. Rozwiązania te powstawały na własny użytek lub zostały zaimplementowane w wyniku inspiracji cudzymi wdrożeniami.

GTM + SEO w pięciu punktach:

  1. Monitorowanie błędów 404
  2. Generowanie tagów kanonicznych pozbawionych zbędnych parametrów
  3. Generowanie danych strukturalnych
  4. Generowanie meta danych
  5. Śledzenie kliknięć linków zewnętrznych

 

1. Monitoring błędów 404

Śledzenie błędów indeksowania i kodów niedostępności (404, 410) to istotny aspekt pracy każdego specjalisty SEO. Wygoda korzystania z serwisu jest ważna zarówno dla użytkowników (UX), jak i dla botów wyszukiwarek (SEO). Dlatego warto poświęcić chwilę czasu na wdrożenie sposobu identyfikacji 404-ek, co umożliwi szybką poprawę doświadczenia użytkowników przeglądających serwis i crawlujących go botów.

Aby zacząć śledzić 404-ki, należy dodać tag Google Analytics dla zdarzeń (np. GA_Event_404, nazwa może być dowolna lub dostosowana do Waszej polityki nazywania tagów). Oczywiście tag będzie uruchamiany po pobraniu strony 404. I teraz – mamy dwie możliwości jego uruchamiania na podstawie reguł wykorzystujących element DOM lub zmienną warstwy danych.

Element DOM

Najprostszym sposobem, niewymagającym większej ingerencji będzie rozpoznawanie elementu DOM (np. nagłówka strony H1):

GTM: Reguła dla 404

 

Reguła zadziała jeśli nagłówkiem H1 na naszej stronie błędu jest „404 Not Found”. Należy więc sprawdzić jaki komunikat w H1 wyświetla się w naszym serwisie (np. „404”, „Strona nie została odnaleziona”, „Strona nie istnieje” etc.) i dostosować tę wartość. Minusem tego rozwiązania jest fakt, że nagłówek strony musi być równy (ang. equals) tekstowi komunikatu błędu. W przypadku zmiany tekstu komunikatu na stronie błędu bez aktualizacji reguły tag nie będzie uruchamiać.

Zmienna warstwy danych

Dlatego bezpieczniejszym i pewniejszym sposobem jest wykorzystanie warstwy danych (dataLayer) i wysyłanie informacji na stronach 404, np.:

<script>
dataLayer = [{
'404': 'yes'
}]
</script>

A następnie zdefiniowanie zmiennej warstwy danych (Data Layer Variable):

GTM: Zmienna wartwy danych 404

Oraz reguły, która uruchomi tag:

GTM: Reguła dla DLV 404

 

Wybrany sposób (i regułę), należy dodać do skonfigurowanego według poniższego schematu tagu Google Analytics:

GTM: Google Analytics Event 404
Wykorzystane w tagu GA_Event_404 zmienne:

  • {{GATC}} – identyfikator usługi GA (jako zmienna o stałej wartości). Jeśli nie używasz tego sposobu to wklej identyfikator w formie UA-XXXXXX-XX.
  • {{Page URL}} zwraca informację o aktualnym adresie URL, czyli adresie z błędem 404.
  • {{Referrer}} zwraca informację o tym, z jakiej strony nastąpiło odesłanie na błędny adres

Polecam też oznaczenie tagu jako Działania niezwiązanego z interakcją, co spowoduje, że ten event nie będzie wpływał na współczynnik odrzuceń w witrynie.

Oczywiście wszystko testujemy i jeśli wszystko jest OK, kontener publikujemy. Zdarzenia dotyczące 404 widoczne będą w raportach Google Analytics w sekcji Zachowanie > Zdarzenia:

Raport Google Analytics > Zachowanie > Zdarzenia

Ostatnim krokiem i dobrą praktyką jest ustawienie sobie alertu w Google Analytics z automatycznymi powiadomieniami o wystąpieniu zdarzeń „Błąd 404”.

 

2. REL Canonical – kierowanie na siebie i usuwanie parametrów

Wiadomo, że Google oraz inne wyszukiwarki w wyniku nieoptymalnej konfiguracji serwera (lub CMSa) oraz występujących w URLach parametrów, mogą nieoczekiwanie zacząć indeksować różne ich warianty. Co więcej problem może pogłębiać się w przypadku, gdy:

  • nasze treści są kopiowane/kradzione przez scraperów lub wyświetlane w agregatorach treści, planetach i społecznościach (zewnętrzna duplikacja treści);
  • używamy tagowania linków do śledzenia efektywności działań marketingowych i dopisujemy kolejne parametry w URLach (wewnętrzna duplikacja treści).

Rozwiązaniem, może nie idealnym, ale wartym wdrożenia jest tag canonical, kierowany na URL pozbawiony zbędnych parametrów. Oczywiście tag kanoniczny nie zastąpi nam poprawnej architektury witryny, czy nie poprawi dziurawego CMSa generującego duplikaty, ale pozwoli zminimalizować problem powtarzającej się treści.
Aby generować „dynamiczny” tag kanoniczny, wykorzystamy właśnie Google Tag Manager oraz prosty kod Javascript (lub w drugiej wersji – jQuery). Zaczynajmy więc 😉

Wykorzystane zmienne:

  • {{Protokół}} – zmienna, która pozwoli nam „wyciągnąć” używany protokół (http lub https)
  • {{Nazwa hosta}} – nazwa zdradza jej przeznaczenie 😉 Będziemy przesyłać nazwę domeny. W moim przypadku usuwam informację o przedrostku www, bo na takim adresie istnieje serwis.
  • {{Page Path}} – zmienna zwracająca ścieżkę dla danej podstrony (Jeśli wcześniej nie wykorzystywałeś tej zmiennej, należy ją włączyć w „Zmiennych wbudowanych”).

GTM: Zmienne dla rel canonical

Na bazie wcześniej utworzonych zmiennych {{Protokół}} i {{Nazwa hosta}} oraz wbudowanej zmiennej {{Page Path}} tworzymy zmienną URL_Canonical zawierającą stałą wartość, czyli ciąg znaków tworzących właśnie nasz tag kanoniczny:

{{Protokół}}://{{Nazwa hosta}}{{Page Path}}

Ważna uwaga: Zmienna {{Page Path}} zawiera już ukośnik, więc nie musimy go uwzględniać w naszym ciągu znaków.

GTM: Zmienna URL Canonical

 

I teraz przechodzimy do najważniejszego – musimy „wstawić” nasz dynamiczny tag kanoniczny w kod źródłowy strony. Zrobimy to właśnie poprzez kontener GTM.

Najszybszym sposobem na wstawienie tego elementu, byłoby użycie Niestandardowego kodu HTML w postaci:

<link href="{{URL_Canonical}}" />

Niestety nie spełni to swojej roli i może nie zadziałać. Treści „doklejane” przez tag HTML zazwyczaj wczytywane są na końcu dokumentu, co oznacza, że Google mógłby nasz tag kanoniczny zignorować.

Dlatego też  posłużymy się kodem Javascript, który doda canonical do sekcji <head>:

<script>
var c = document.createElement('link');
c.rel = 'canonical';
c.href = {{ URL_Canonical}};
document.head.appendChild(c);
</script>

GTM tag: REL canonical
Ten sposób jest dobry w przypadku, gdy w naszym serwisie tagi kanoniczne w ogóle nie występują. W przypadku, gdy nasz CMS korzysta już z rel=canonical, a my chcemy go „nadpisać” proponuję użyć funkcji odwołującej się do jQuery:

<script>
 $(function() {
 $('link[rel="canonical"]').attr("href", {{URL_Canonical}});
 });
</script>

GTM HTML tag: REL canonical (jQuery)

 

Działanie obu tagów i samych skryptów możemy sprawdzić używając konsoli w Google Chrome (DevTools) po wciśnięciu F12 i wyszukaniu frazy „canonical”:

GTM + SEO: Rel canonical - podgląd działania

Od tej pory nie powinniśmy już widywać zaindeksowanych URLi z parametrami śledzącymi lub innymi, które powodują duplikacje.

 

3. Generowanie danych strukturalnych

Chcąc wzbogacić wyniki wyszukiwarki wyświetlane dla naszego serwisu, możemy wdrożyć tzw. dane strukturalne. Pomogą one wyróżnić daną podstronę w wynikach wyszukiwania, dostarczając jednocześnie użytkownikom większej ilości szczegółów dotyczących np. firmy, produktu czy usługi.

Najszybszym sposobem ich implementacji jest skrypt JSON-LD (JavaScript Object Notation for Linked Data), który zawiera informacje typu nazwa/wartość. Więcej  o JSON-LD znajdziecie w pomocy Google dla deweloperów.

Aby wdrożyć dane strukturalne poprzez GTM, możemy użyć podobnie jak wcześniej Niestandardowego kodu HTML. Dlaczego? Skrypt JSON-LD może występować w dowolnym miejscu kodu źródłowego.

Poniżej znajduje się prosty przykład dla danych strukturalnych biznesów lokalnych. Skrypt należy zaktualizować danymi Twojej firmy.

<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "LocalBusiness",
 "url": "http://przyklad.pl",
 "image": "http://przyklad.pl/logo.png",
 "priceRange" : "40zł - 150zł",
 "address": {
 "@type": "PostalAddress",
 "addressLocality": "Miejscowość",
 "addressRegion": "województwo",
 "postalCode":"00-000",
 "streetAddress": "Ulica i numer"
 },
 "description": "Krótki opis Twojego biznesu",
 "name": "Nazwa firmy",
 "telephone": "555-111-2345",
 "openingHours": "Mo,Tu,We,Th,Fr 09:00-17:00",
 "geo": {
 "@type": "GeoCoordinates",
 "latitude": "00.00",
 "longitude": "00.00"
 }, 
 "sameAs" : [ "http://www.facebook.com/twoj-profil",
 "http://www.twitter.com/twoj-profil",
 "http://plus.google.com/twoj-profil"]
 }
</script>

JSON wklejony „na sztywno” w tag GTM waliduje się bez problemu. Niemniej jednak skrypt będzie przydatny jedynie dla mało rozbudowanych witryn, np. one-page design lub stron-wizytówek.
GTM + SEO: Walidacja danych strukturalncyh

 

„Nieograniczone” możliwości możemy otrzymać w przypadku, gdy skrypt JSON-LD będziemy wypełniać dynamicznie  z uwzględnieniem, np. zmiennych warstwy danych lub elementów DOM.

Poniżej znajduje się przykład dynamicznie generowanych tagów schema.org dla produktów w oparciu o JSON-LD oraz elementy DOM. Przede wszystkim będziemy potrzebować kodu, który będzie wklejał nasze wartości w skrypt JSON-LD:

GTM oraz skrypt JSON-LD

 

Kod źródłowy do pobrania (skopiowania) znajduje się tutaj.
Jak pewnie zauważyliście w powyższym kodzie znajduje się 7 zmiennych GTM, np.:

  • {{Schema-title}}, która zwraca tytuł strony (w naszym przypadku nazwę produktu)
  • {{Schema-desc}}, która zwraca opis produktu
  • {{Schema-cena}}, która zwraca aktualną cenę produktu
  • itd.

Zmienne te posiadają wartości pobrane za pomocą tzw. selektorów CSS lub identyfikatorów z elementów DOM danej podstrony. Główną i dość żmudną pracą jest właśnie odnalezienie owych selektorów/identyfikatorów w kodzie źródłowym w celu konfiguracji poszczególnych zmiennych. Przypomina to trochę Marker danych z Google Search Console, przy czym zamiast „uczyć” Google wzorców danych, musimy sami ręcznie je odnaleźć i opisać, np.:

GTM: Zmienne element DOM dla schema.org

Mając wszystkie zmienne skonfigurowane, po opublikowaniu kontenera będziemy mogli cieszyć się fragmentami rozszerzonymi (rich snippets) dla produktów:

GTM + SEO: Podgląd rich snippets dla produktów

 

Wadą powyższej metody jest to, że zakłada ona, że mamy poprawnie i czysto napisany kod źródłowy umożliwiający odnalezienie selektorów do wymaganych właściwości tagów.

Inne przykłady wdrożeń danych strukturalnych poprzez GTM oraz gotowe do zaimportowania tagi, reguły i zmienne możecie znaleźć  również na Moz.com lub SlideShare.

 

4. Generowanie meta danych

Z wyżej opisanych metod (m.in. REL Canonical) możemy się już domyślać, że Google całkiem nieźle sobie radzi z obsługą Javascriptu, w tym na pewno dynamiczną obsługą elementów DOM (tytuły, opisy, tagi kanoniczne), ale też przekierowań i linków. W tym zakresie polecam artykuł na SearchEngineLand: We Tested How Googlebot Crawls Javascript And Here’s What We Learned.

Idąc tym torem, kolejny pomysł na wykorzystanie Tag Managera w SEO to właśnie dynamiczne generowanie metatagów, np. w zakresie:

  • indeksacji/sterowania robotami,
  • znaczników title i meta opisów (description).

 

noindex, follow

Załóżmy, że mamy podstrony z określonej struktury (np. archiwa, wyszukiwarka wewnętrzna), których nie chcielibyśmy indeksować, ale chcielibyśmy wykorzystać linkowanie wewnętrzne (lub zewnętrzne) w celach pozycjonowania. Możemy więc wygenerować tag HTML z metatagiem robots równym noindex, follow i uruchamiać go jedynie na stronach zawierających ciąg znaków /search w adresie URL:

GTM + SEO: meta robots

Sprawdzamy używając konsoli (F12 w Google Chrome) i szukając frazy „robots”:

GTM: meta robots (podląd Konsoli dla deweloperów)

Nie jest to może najlepszy sposób na zarządzanie budżetem indeksowania witryny (ang. crawl budget), ale bez wątpienia nie naraża nas na łamanie wskazówek Google dla webmasterów poprzez indeksowanie podstron niskiej jakości.

Znaczniki title i meta description

Korzystając z tego samego kodu Javascript możemy generować znaczniki title oraz opisy meta. Ze względu na to, że elementy te prawdopodobnie będziemy chcieli zmieniać na wielu podstronach to bardzo pomocną funkcją GTM okażą się tzw. Tabele przeglądowe (ang. Lookup Table). Ten szczególny typ pozwala utworzyć zmienną, której wartość będzie zależna od wartości innej zmiennej.

Przykład:

Jeśli zmienna wejściowa {{Page Path}}, czyli  zwracająca ścieżkę dla danej podstrony równa się /uslugi to wartość zmiennej {{Tabela-SEO-Description}} zmień według schematu na „TEST TEST TEST”:

GTM: Zmienna Tabela przeglądowa dla meta description

Tak utworzoną, przykładową tabelę możemy użyć dalej w tagu HTML z kodem Javascript, który będzie dodawał nam opis meta:

<script>
 if({{Tabela-SEO-Description}}) {
 var d = document.createElement('meta'); 
 d.name = 'description'; 
 d.content = {{Tabela-SEO-Description}}; 
 document.head.appendChild(d); }
</script>

W przypadku title kod musi być trochę inny, bowiem nadpisujemy ten element:

<script type="text/javascript">
document.title = {{Tabela-SEO-Title}};
</script>

Gdzie {{Tabela-SEO-Title}}, jest osobną tabelą przestawną dla tytułów.

Tak wygląda nasz snippet po zaindeksowaniu w wynikach wyszukiwania:

GTM + SEO: Znaczniki title i meta dynamicznie wstawione przez JS

Obecnie testuję jeszcze rozwiązanie nadpisywania tytułów i opisów poprzez jQuery.
Postaram się zaktualizować niniejszy artykuł po zakończeniu testów.

 

5. Śledzenie linków zewnętrznych

Śledzenie linków wychodzących przydaje się zarówno w pracy analityka (np. identyfikacja ścieżek wyjścia), ale i specjalisty SEO (np. identyfikacja potencjalnych linków spamowych lub ocena wagi linku i przekazywanej przez niego mocy, np. na podstawie patentu Reasonable Surfer).

Aby monitorować kliknięcia w linki będziemy potrzebować:

  • zmiennej zdarzenia automatycznego, np. Click URL Hostname
  • reguły (trigger), np. o nazwie Linki zewnętrzne
  • no i oczywiście tagu zdarzenia Google Analytics.

GTM: Śledzenie linków zewnętrznych

W zmiennej zdarzenia automatycznego ustawiamy typ zmiennej na Adres URL elementu, a typ elementu na Nazwa hosta. Możemy również zaznaczyć opcję Usuń „www”.

Następnie, tworząc regułę ustawiamy ją tylko dla linków, dopasowujemy do wyrażeń regularnych (matches RegEx .*) oraz uruchamiamy w przypadku, gdy nasza zmienna Click URL Hostname nie zawiera adresu naszego serwisu. Pamiętajmy również o oczekiwaniu na tagi oraz weryfikacji

Ostatnim krokiem jest stworzenie tagu Universal Analytics ze śledzeniem zdarzeń:

Google Analytics Event: Linki zewnetrzne

W przypadku, gdy nasz serwis używa wewnętrznych przekierowań lub linków partnerskich warto utworzyć osobną regułę, która takie linki wykluczy, czyli np. Click URL zawiera | naszadomena.pl/redirect/. Następnie taką regułę dodajemy do wyjątków.

To wszystko. Działanie możemy sprawdzić od razu w raportach Google Analytics > Czas rzeczywisty > Zdarzenia:

Raport Google Analytics > Zdarzenia (linki wychodzące)

 

Podsumowanie

Jak widać powyżej Google Tag Manager to bardzo potężne narzędzie, które możemy wykorzystywać także w inny sposób niż tylko do zarządzania tagami potrzebnymi w marketingu, czy analityce internetowej. Opisane metody, tagi, reguły można dość szybko i łatwo wdrożyć bez większych umiejętności w programowaniu.

Mam nadzieję, że spróbujesz chociaż jednej z nich. Być może dzięki nim ułatwisz sobie podejmowanie trafnych decyzji w prowadzonych działaniach SEO lub wyeliminujesz błędy, które pozwolą poprawić ocenę Twojej witryny. Powodzenia w testowaniu!

5 sposobów na wykorzystanie Google Tag Managera w SEO
5 (100%) 1 vote

Autor: Michał Góralczyk

Jestem pasjonatem technicznego SEO, bywam jednak ukontentowany marketingiem treści ;-) Odpowiadam za planowanie i realizację kampanii SEO, analizę ich efektywności oraz optymalizację prowadzonych działań.

Prywatnie nerwus i bałaganiarz, w dz...