API - Implementatie mediabronregistratie

<script>
const urlParams = new URLSearchParams(window.location.search);
const utmSource = urlParams.get('utm_source');

if (utmSource) {
    localStorage.setItem('t2m_source', utmSource);
    localStorage.setItem('t2m_source_timestamp', Date.now());
}
</script>

Bewaartermijn controleren

localStorage heeft geen automatische vervaldatum. Daarom wordt naast de mediabron een timestamp opgeslagen. Bij het ophalen van de mediabron wordt gecontroleerd of deze nog binnen de gekozen bewaartermijn valt. 

TOOL2MATCH hanteert een bewaartermijn van 30 dagen vanaf het moment waarop voor het laatst een nieuwe utm_source is opgeslagen. Na deze termijn wordt de bron bij de eerstvolgende controle verwijderd. 

Hiervoor kan onderstaande code worden gebruikt: 

<script>
const utmSource = localStorage.getItem('t2m_source');
const timestamp = localStorage.getItem('t2m_source_timestamp');

const storagePeriod = 30 * 24 * 60 * 60 * 1000;

let validUtmSource = null;

if (
    utmSource &&
    timestamp &&
    Date.now() - Number(timestamp) < storagePeriod
) {
    validUtmSource = utmSource;
} else {
    localStorage.removeItem('t2m_source');
    localStorage.removeItem('t2m_source_timestamp');
}
</script>

Vanaf dit punt mag uitsluitend validUtmSource worden gebruikt wanneer de mediabron verder wordt verwerkt. Gebruik hiervoor niet opnieuw rechtstreeks t2m_source uit de localStorage. Op die manier wordt voorkomen dat een verlopen mediabron alsnog wordt gebruikt.

Wanneer de bewaartermijn is verstreken, worden de opgeslagen mediabron en de bijbehorende timestamp verwijderd zodra deze controle wordt uitgevoerd.

Wanneer binnen de bewaartermijn een nieuwe utm_source wordt aangetroffen, wordt de eerder opgeslagen mediabron overschreven en start de bewaartermijn opnieuw.

2. TOOL2MATCH-pixel implementeren

De TOOL2MATCH-pixel wordt gebruikt om een vacatureview te registreren. 

Views worden geregistreerd wanneer kandidaten op de vacaturedetailpagina landen. Wanneer sprake is van een aparte sollicitatiepagina, worden ook directe views op deze pagina gemeten. 

Te verrichten actie: 

Controleer eerst de bewaartermijn. Gebruik daarna validUtmSource als utm_source in de pixel en codeer deze waarde voor gebruik in de URL. Zonder geldige bron wordt een lege waarde meegestuurd en registreert TOOL2MATCH de view als ‘Overige’. 

<iframe
    src="https://<TOOL2MATCH-DOMEIN>.tool2match.nl/jobsite/tp/<JOB-ID>?utm_source=<GECODEERDE-VALID-UTM-SOURCE>"
    title="Tracking"
    aria-hidden="true"
    style="width:1px;height:1px;">
</iframe>

<script>
const jobId = '<JOB-ID>';
const viewKey = `t2m_view_registered_${jobId}`;

// Controleer of voor deze vacature binnen het huidige tabblad al een view is geregistreerd
if (!sessionStorage.getItem(viewKey)) {

    // Haal de opgeslagen mediabron en timestamp op
    const utmSource = localStorage.getItem('t2m_source');
    const timestamp = localStorage.getItem('t2m_source_timestamp');

    // Bewaartermijn van 30 dagen
    const storagePeriod = 30 * 24 * 60 * 60 * 1000;

    let validUtmSource = null;

    // Controleer of de opgeslagen mediabron nog geldig is
    if (
        utmSource &&
        timestamp &&
        Date.now() - Number(timestamp) < storagePeriod
    ) {
        validUtmSource = utmSource;
    } else {
        // Verwijder de mediabron wanneer de bewaartermijn is verstreken
        localStorage.removeItem('t2m_source');
        localStorage.removeItem('t2m_source_timestamp');
    }

    // Codeer de geldige mediabron voor gebruik in de URL
    const encodedUtmSource = validUtmSource
        ? encodeURIComponent(validUtmSource)
        : '';

    // Maak de TOOL2MATCH-pixel aan
    const pixel = document.createElement('iframe');

    pixel.src = `https://<TOOL2MATCH-DOMEIN>.tool2match.nl/jobsite/tp/${jobId}?utm_source=${encodedUtmSource}`;
    pixel.title = 'Tracking';
    pixel.setAttribute('aria-hidden', 'true');
    pixel.style.width = '1px';
    pixel.style.height = '1px';

    // Voeg de pixel toe aan de pagina
    document.body.appendChild(pixel);

    // Registreer de view voor deze vacature binnen het huidige tabblad
    sessionStorage.setItem(viewKey, 'true');
}
</script>

Let op: 

• Hierbij is jobId het dynamische ID van de betreffende vacature.  
• De sessionStorage-waarde wordt per vacature opgeslagen. Hierdoor kan iedere vacature binnen dezelfde tabbladsessie afzonderlijk één view registreren.
  
• De TOOL2MATCH-pixel wordt uitsluitend geladen wanneer voor deze vacature nog geen view is geregistreerd in de huidige tabbladsessie.  

De gewenste werking is: 

Situatie 1: Kandidaat landt op vacaturedetailpagina en klikt door naar sollicitatiepagina

--> 1 view

Situatie 2: Kandidaat landt rechtstreeks op sollicitatiepagina

--> 1 view

Situatie 3: Kandidaat landt op vacaturedetailpagina, navigeert naar een andere pagina en keert later terug naar dezelfde vacature 

--> 1 view

Situatie 4: Kandidaat bekijkt binnen dezelfde tabbladsessie een andere vacature 

--> 1 nieuwe view voor de andere vacature

Afronding

Met bovenstaande implementatie worden vacatureviews en sollicitaties binnen TOOL2MATCH gekoppeld aan de bijbehorende mediabron. Hierdoor kunnen gebruikers binnen TOOL2MATCH inzicht krijgen in welke mediabronnen bezoekers en sollicitaties genereren.