Jeden z naszych klientów prowadzi działania reklamowe, których celem jest uzyskanie kontaktu telefonicznego od potencjalnych klientów. Takie podejście jest kluczowe, ponieważ bezpośredni kontakt telefoniczny często prowadzi do wyższej konwersji i lepszej obsługi klienta, co przekłada się na większe zadowolenie klientów i wyższą sprzedaż.

Standardowe rozwiązania umożliwiają pomiar konwersji telefonicznych w określonych przypadkach. Możemy korzystać z website call conversion proponowanych przez Google, które pozwalają śledzić połączenia telefoniczne bezpośrednio z witryny internetowej. Popularnym rozwiązaniem jest również pomiar kliknięcia w przycisk z numerem telefonu, co pozwala na łatwe śledzenie połączeń inicjowanych bezpośrednio ze strony.

W przypadku naszego klienta lwia część ruchu pochodzi z komputerów osobistych. Z tego powodu powstaje problem — nie posiadamy żadnej możliwości pomiaru ilości połączeń telefonicznych w sytuacji, gdy użytkownik przepisuje numer telefonu ze strony na swój telefon i wykonuje połączenie.

Nasze rozwiązanie

Konfigurację przeprowadziliśmy, dodając niestandardowe rozwiązanie w Google Tag Manager. Dodatkowym wymaganiem było utworzenie przez klienta specjalnego numeru telefonu, którego aktywność monitorowaliśmy. W zależności od potrzeb można utworzyć kilka numerów, po jednym dla każdego badanego źródła ruchu.

Efektem działania naszego rozwiązania jest podmiana numeru na stronie, jeśli ruch pochodzi z interesującego nas kanału. W naszym przypadku był to ruch płatny z Google Ads oraz Criteo. Ruch z takich źródeł jest oznaczony odpowiednimi parametrami URL, takimi jak UTMy czy automatyczny parametr gclid. Przykładowy URL może wyglądać w następujący sposób:

https://example.pl/?utm_source=google&utm_medium=cpc&utm_campaign=nazwa_kampanii&utm_content=search_non-brand&gad_source=1&gclid=CjwKCAjwqMO0BhA8EiwAFTLgINPFtJAUUJvRpygygakr8yJwt19BTfcrrXqMj5vnSCuPo6PVgVoDxhoCjRAQAvD_BwE

URL oraz referral strony dla ruchu organicznego zapisujemy w session_storage. Jest to obszar pamięci przeglądarki, który przechowuje dane dla danej sesji przeglądania i jest usuwany po zamknięciu przeglądarki. Ograniczeniem session storage jest fakt, że dane są dostępne tylko w obrębie jednej sesji, co zapewnia większą stabilność w kontekście monitorowania bieżącego ruchu.

W tym celu konfigurujemy customowy tag html w GTM o następującym działaniu:

1. <script>
2. function parseQueryParams() {
3.    // Pobiera parametry zapytania z adresu URL
4.    var queryString = window.location.search;
5.    var urlParams = new URLSearchParams(queryString);
6.    // Pobiera wartość parametru 'utm_source’ i konwertuje na małe litery
7.    var utmSource = urlParams.get(’utm_source’);
8.    if (utmSource) {
9.        utmSource = utmSource.toLowerCase();
10.    }
11.   
12.    // Pobiera wartość parametru 'utm_medium’ i konwertuje na małe litery
13.    var utmMedium = urlParams.get(’utm_medium’);
14.    if (utmMedium) {
15.        utmMedium = utmMedium.toLowerCase();
16.    }
17.   
18.    // Pobiera wartość parametru 'gclid’
19.    var gclid = urlParams.get(’gclid’);
20.    // Funkcja zwracająca wartość źródła ruchu na podstawie parametrów utmSource i utmMedium
21.    function getTrafficSourceValue(utmSource, utmMedium) {
22.        if (!utmSource) {
23.            return ”;
24.        }
25.        if (utmSource === 'direct’) {
26.            return 'direct’;
27.        }
28.        if (utmSource === 'google’ && utmMedium === 'cpc’) {
29.            return 'ps’;
30.        }
31.        if (utmSource === 'google’ && utmMedium === 'organic’) {
32.            return 'google organic’;
33.        }
34.        if (utmSource === 'facebook’ && utmMedium === 'cpc’) {
35.            return 'fb-paid’;
36.        }
37.        if (utmSource === 'facebook’ && utmMedium !== 'cpc’) {
38.            return 'fb’;
39.        }
40.        if (utmSource === 'criteo’ && utmMedium === 'display’) {
41.            return 'criteo’;
42.        }
43.        return 'other’;
44.    }
45.    // Zmienna przechowująca wartość źródła ruchu
46.    var value = ”;
47.    // Referer strony
48.    var referrer = document.referrer;
49.    // Logika ustalania wartości źródła ruchu
50.    if (utmSource) {
51.        value = getTrafficSourceValue(utmSource, utmMedium);
52.    } else if (gclid) {
53.        value = 'google cpc’;
54.    } else if (referrer.includes(’https://www.google.com/’)) {
55.        value = 'google organic’;
56.    } else if (referrer) {
57.        value = 'other’;
58.    }
59.    // Zapisuje wartość źródła ruchu w sessionStorage
60.    if (value !== ”) {
61.        sessionStorage.setItem(’trafficSource’, value);
62.    }
63.    // Zwraca wartość źródła ruchu dla ewentualnego dalszego użycia
64.    return value;
65. }
66. // Wywołuje funkcję bezpośrednio, aby uruchomiła się od razu po załadowaniu skryptu
67. parseQueryParams();
68. </script>

Kod powinien zostać wywołany jak najwcześniej, w naszym przypadku użyliśmy triggera DOM ready.

Dlaczego session storage?

Wcześniej w tym celu wykorzystywaliśmy ciasteczka. Zrezygnowaliśmy jednak z tego rozwiązania na rzecz session storage, które jest bardziej stabilne. W obliczu rosnącej liczby przeglądarek, blokujących ciasteczka trzecich stron, session storage oferuje bardziej niezawodne i bezpieczne rozwiązanie, które jest przypisywane na całą sesję użytkownika. Dodatkowo, w kontekście „cookieless world” (świata bez ciasteczek), session storage staje się coraz bardziej preferowaną metodą przechowywania danych sesyjnych.

Podmiana numeru telefonu

Następnym elementem procesu jest wywołanie drugiego tagu, który sprawdza, czy na stronie występuje element zawierający określony numer telefonu, który chcemy podmienić. Kod zamienia wartość tekstu oraz zawartość linku na inny numer — specjalnie przygotowany do rejestrowania ruchu z danego źródła.

1. <script>
2. if ({{local storage – trafficSource}} == „google cpc” || {{local storage – trafficSource}} == „criteo” || {{source – url}} == „google cpc” || {{source – url}} == „criteo”){
3.  
4.    var oldNumbers = [
5.        '[href*=”tel:123 456 789″]’,
6.        '[href*=”tel://123456789″]’,
7.        '[href*=”tel://123 456 789″]’
8.    ];
9.   
10.    var newNumber = „tel:987 654 321”;
11.    var newNumberText = „987 654 321”;
12.   
13.    oldNumbers.forEach(function(selector) {
14.        var elements = document.querySelectorAll(selector);
15.        for (var i = 0; i < elements.length; i++){
16.            elements[i].href = newNumber;
17.            elements[i].text = newNumberText;
18.        }
19.    });
20. }
21. </script>

Zmienna pomocnicza

W naszym rozwiązaniu korzystamy z pomocniczej zmiennej, która przechowuje wartość źródła ruchu w local storage:

1. function() {
2.    return localStorage.getItem(’trafficSource’) || 'unknown’;
3. }

Proces działania kodu

Po załadowaniu strony, skrypt parseQueryParams pobiera parametry URL oraz referer strony, aby określić źródło ruchu. Na przykład, jeśli URL zawiera utm_source=google i utm_medium=cpc, to źródło ruchu jest oznaczone jako google cpc. Wartość ta jest następnie zapisywana w session storage.

Gdy użytkownik przemieszcza się po stronie, drugi skrypt sprawdza, czy w session storage zapisana jest wartość źródła ruchu odpowiadająca naszym kryteriom (np. google cpc). Jeśli tak, skrypt podmienia numery telefonów na stronie na specjalny numer, który jest monitorowany pod kątem połączeń telefonicznych.

Zalety naszego rozwiązania

Nasze rozwiązanie posiada wiele zalet, które znacząco poprawiają efektywność pomiaru konwersji telefonicznych:

1. Precyzyjne śledzenie: Możemy dokładnie monitorować połączenia telefoniczne pochodzące z konkretnych źródeł ruchu.
2. Zwiększona stabilność: Session storage zapewnia bardziej stabilne przechowywanie danych w porównaniu do ciasteczek, które mogą być blokowane.
3. Skalowalność: Rozwiązanie można łatwo dostosować do różnych kampanii reklamowych i kanałów ruchu.
4. Dostosowanie do trendów: Przygotowanie na przyszłość bez ciasteczek trzecich stron, co jest zgodne z najnowszymi trendami w ochronie prywatności w Internecie.

Podsumowanie

Dzięki wdrożeniu niestandardowego rozwiązania w Google Tag Manager, nasz klient może teraz skutecznie śledzić konwersje telefoniczne z ruchu komputerowego. Pomimo rosnących wyzwań związanych z ochroną prywatności i zmianami w technologii przeglądarek, nasza metoda zapewnia stabilność i precyzję, pozwalając na dokładne monitorowanie efektywności kampanii reklamowych. Dzięki temu klient może lepiej dostosowywać swoje strategie marketingowe i osiągać lepsze wyniki sprzedażowe.