Im bardziej Twoja strona spełnia oczekiwania użytkownika, tym większa szansa na konwersję. A pomoże Ci w tym dynamiczna podmiana treści na stronie internetowej. Przeczytaj, jak ustawić ją za darmo, bez angażowania programistów i dodatkowych kosztów za specjalne serwisy ― za pomocą Google Tag Managera. Swoim doświadczeniem dzieli się Diana Pawłowska, specjalista PPC w Ringostat.
Co to jest treść dynamiczna?
Dynamiczna treść to zmienne informacje na stronie internetowej. Na przykład nagłówki, opisy produktów itp. Treść zmienia się w zależności od określonych warunków.
Dynamiczna treść na stronie pomoże zwiększyć trafność strony dla użytkownika, a tym samym pozytywnie wpłynie na konwersję.
W szczególności rozwiązanie to może się przydać przy promowaniu kampanii reklamowych, dla których można ustawić podstawianie słów kluczowych do nagłówków. Taka podmiana będzie miała miejsce dzięki parametrom URL ― etykietom UTM, które należy dodać do reklam.
Zanim jednak to nastąpi, musisz dokonać pewnych ustawień w GTM, które zostały opisane poniżej.
Konfiguracja Google Tag Manager
Za przykład niech posłuży nam Ringostat.
Jednym z naszych produktów jest centrala telefoniczna online. Użytkownicy zazwyczaj szukają jej używając całkiem różnych zapytań. Na przykład: „wirtualna telefonia”, ” wirtualna PBX”, „telefonia SIP” lub „telefonia IP” itp. Oczywiste jest, że użytkownik chciałby zobaczyć na stronie dokładnie to, co wygooglował. Dlatego bardzo przydatne jest dynamiczne podstawianie treści, dzięki któremu możemy dostosować nagłówek do różnych zapytań.
Krok 1: Tworzenie zmiennych
Pierwszą rzeczą, którą należy zrobić, jest stworzenie zmiennej typu „URL”. Aby to zrobić, przejdź do GTM i kliknij „Zmienne”.
Teraz przejdźmy właśnie do tworzenia zmiennej:
- nazwa zmiennej może być dowolna ― w naszym przykładzie jest to „paramURL”;
- typ zmiennej to „URL”;
- typ elementu ― „query” czyli „zapytanie”;
- klucz zapytania “utm_content”, ale w Twoim przypadku może być inny.
Zapisz podane ustawienia.
Następnie musisz stworzyć kolejną zmienną o typie “Lookup Table”, czyli „Tabela wyszukiwania”. Ale zanim to zrobisz zdecyduj ile wariantów nagłówka chcesz mieć. Jak opisałam powyżej na naszym przykładzie, najczęściej telefonia jest wyszukiwana za pomocą czterech zapytań. Potrzebujemy więc stworzyć cztery warianty. Dla ułatwienia możesz przygotować tabelę z etykietami UTM, treściami wartości i odpowiadającymi im adresami URL.
Poniżej nasz przykład dla treści w języku angielskim:
Teraz wracamy do zmiennej:
- określamy dowolną nazwę, w naszym przykładzie jest to „changeTitle”;
- typ zmiennej to „Lookup Table” czyli „Tabela wyszukiwania”;
- zmienna wejściowa {paramURL}, ta którą stworzyłeś wcześniej;
- w tabeli wyszukiwania kliknij na „Dodaj wiersz”, w linii „Input” określ wartość dla utm_content, a w linii „Output” odpowiednie nagłówki z Twojej tabeli;
- poniżej zaznacz „Ustaw wartość domyślną” i określ domyślny nagłówek, a następnie zapisz.
Krok 2: Tworzenie aktywatora
Następnie musimy stworzyć aktywator, który będzie uruchamiany tylko wtedy, gdy wartość zmiennej utm_content zostanie określona. Oznacza to, że w przypadkach, gdy URL nie będzie zawierał parametru zapytania, a jedynie „undefined”, nasz aktywator nie zostanie uruchomiony. A wraz z nim nie zadziała również podmiana treści.
Aby to zrobić:
- przejdź do zakładki „Triggers” czyli „Aktywatory”, kliknij „Utwórz”;
- wybierz dowolną nazwę aktywatora, w naszym przykładzie „Trigger ― changeTitle”;
- typ aktywatora “Page View” czyli „Odsłony stron”;
- powód uruchomienia aktywatora ― “Some Page Views” czyli “Niektóre odsłony strony”;
- następnie wybierz zmienną, jaką utworzyliśmy na początku ― „paramURL”, która nie jest równa wartości „undefined”;
- zapisz.
Krok 3: Utworzenie tagu
Teraz musimy stworzyć tag, który będzie wykonywał podmianę nagłówka na stronie. Ale zanim to zrobimy, należy poznać klasę nagłówka i skopiować ją.
W tym celu przejdź do żądanej strony, kliknij prawym przyciskiem myszy na nagłówek i wybierz „Wyświetl kod” ― czyli otwórz konsolę programisty i znajdź „class”. W naszym przypadku zawiera ona wartość 'tn-atom’.
Wracamy do tworzenia naszego tagu. W tym celu przejdź do zakładki „Tagi” i kliknij „Utwórz”:
- ustaw dowolną nazwę, w naszym przykładzie tag to „changeTitle”;
- typ tagu „Custom HTML tag” czyli „Własny tag HTML”;
- w polu „HTML” dodaj mały kawałek kodu ― w naszym przykładzie wyglądałby on następująco:
<script>
x = document.getElementsByClassName(„tn-atom”);
x[0].innerHTML = „{{changeTitle}}”;
</script>
Ważne: do tej części kodu getElementsByClassName(„tn-atom”); należy dodać swoją nazwę „class”, którą udało Ci się znaleźć wcześniej w konsoli programisty ― w nawiasach zamiast „tn-atom”.
W aktywatorach uruchamiania “Firing Triggers” dodaj wcześniej utworzony aktywator, w naszym przypadku “Trigger ― changeTitle”. I zapisz zmiany.
Wnioski
Jeśli nie masz koderów i pieniędzy na dodatkowe usługi, możesz ustawić darmową podmianę treści na stronie poprzez Google Tag Manager. Pomoże to uczynić Twoją stronę jak najbardziej trafną na zapytania użytkowników i pozytywnie to wpłynie na współczynnik konwersji.