Przekazywanie UTM na następne podstrony

Aby przekazywać kody UTM na różne podstrony w ramach jednej sesji użytkownika, możesz użyć kilku technik. Poniżej przedstawiam najpopularniejsze metody:

1. Przechowywanie kodów UTM w Local Storage lub Session Storage #

Jednym z najprostszych rozwiązań jest przechowywanie kodów UTM w pamięci przeglądarki. Możesz użyć localStorage lub sessionStorage, aby przechowywać te informacje na czas trwania sesji użytkownika.

Kroki: #

1. Pobieranie parametrów UTM z URL
   Gdy użytkownik trafia na stronę z kodami UTM, możesz je wyciągnąć z URL za pomocą JavaScript.

function getUTMParameters() {
    const urlParams = new URLSearchParams(window.location.search);
    const utm_source = urlParams.get('utm_source');
    const utm_medium = urlParams.get('utm_medium');
    const utm_campaign = urlParams.get('utm_campaign');
    const utm_content = urlParams.get('utm_content');
    const utm_term = urlParams.get('utm_term');

    return { utm_source, utm_medium, utm_campaign, utm_content, utm_term };
}

2. Przechowywanie parametrów w sessionStorage
   Po zebraniu UTM-ów, zapisz je w sessionStorage, aby były dostępne na wszystkich podstronach w ramach sesji użytkownika.

function storeUTMParameters() {
    const utms = getUTMParameters();
    if (utms.utm_source) {
        sessionStorage.setItem('utm_source', utms.utm_source);
        sessionStorage.setItem('utm_medium', utms.utm_medium);
        sessionStorage.setItem('utm_campaign', utms.utm_campaign);
        sessionStorage.setItem('utm_content', utms.utm_content);
        sessionStorage.setItem('utm_term', utms.utm_term);
    }
}
storeUTMParameters();

3. Dodawanie kodów UTM do linków
   Aby zapewnić, że kody UTM będą przekazywane podczas nawigacji po stronie, możesz dynamicznie dodawać te parametry do wszystkich linków wewnętrznych.

function appendUTMParametersToLinks() {
    const links = document.querySelectorAll('a');
    const utm_source = sessionStorage.getItem('utm_source');

    links.forEach(link => {
        if (link.href.includes(window.location.host)) {  // Sprawdza, czy link jest wewnętrzny
            const url = new URL(link.href);
            if (utm_source) {
                url.searchParams.set('utm_source', utm_source);
                url.searchParams.set('utm_medium', sessionStorage.getItem('utm_medium'));
                url.searchParams.set('utm_campaign', sessionStorage.getItem('utm_campaign'));
                url.searchParams.set('utm_content', sessionStorage.getItem('utm_content'));
                url.searchParams.set('utm_term', sessionStorage.getItem('utm_term'));
                link.href = url.toString();
            }
        }
    });
}
appendUTMParametersToLinks();

2. Przekazywanie parametrów UTM przez formularze #

Jeżeli Twoja strona zawiera formularze, a nie tylko linki, warto przekazywać kody UTM jako ukryte pola formularzy.

Kroki: #

1. Tworzenie ukrytych pól w formularzu:

<form action="/submit-form" method="post">
    <input type="hidden" name="utm_source" id="utm_source">
    <input type="hidden" name="utm_medium" id="utm_medium">
    <input type="hidden" name="utm_campaign" id="utm_campaign">
    <input type="hidden" name="utm_content" id="utm_content">
    <input type="hidden" name="utm_term" id="utm_term">
    <!-- reszta formularza -->
</form>

2. Dynamiczne wypełnianie formularza UTM-ami:

function populateUTMInForm() {
    document.getElementById('utm_source').value = sessionStorage.getItem('utm_source');
    document.getElementById('utm_medium').value = sessionStorage.getItem('utm_medium');
    document.getElementById('utm_campaign').value = sessionStorage.getItem('utm_campaign');
    document.getElementById('utm_content').value = sessionStorage.getItem('utm_content');
    document.getElementById('utm_term').value = sessionStorage.getItem('utm_term');
}
populateUTMInForm();

3. Alternatywa: Przekazywanie UTM za pomocą plików cookies #

Inną opcją jest zapisanie parametrów UTM w ciasteczkach, co umożliwia przekazywanie tych danych między sesjami (np. po zamknięciu przeglądarki).

Ustawianie ciasteczek: #

function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function storeUTMInCookies() {
    const utms = getUTMParameters();
    if (utms.utm_source) {
        setCookie('utm_source', utms.utm_source, 30);
        setCookie('utm_medium', utms.utm_medium, 30);
        setCookie('utm_campaign', utms.utm_campaign, 30);
        setCookie('utm_content', utms.utm_content, 30);
        setCookie('utm_term', utms.utm_term, 30);
    }
}
storeUTMInCookies();

Podsumowanie #

Najprostszą metodą jest przechowywanie UTM-ów w sessionStorage i dynamiczne przekazywanie ich na podstrony poprzez manipulację linkami. Alternatywnie, można wykorzystać cookies, aby dane przetrwały między sesjami. Wybór metody zależy od Twoich potrzeb – sessionStorage jest idealne do krótkoterminowych sesji, podczas gdy ciasteczka są bardziej trwałe.