API - Implementatie mediabronregistratie

Gebruikers hebben binnen TOOL2MATCH de mogelijkheid om per mediabron statistieken op te halen. Hierbij kan worden bekeken hoeveel views verschillende mediabronnen genereren en welke mediabronnen daadwerkelijk voor sollicitaties zorgen.

In dit artikel wordt beschreven hoe deze functionaliteit kan worden geïmplementeerd wanneer TOOL2MATCH via API's in de website is geïntegreerd.

Let op: wanneer gebruik wordt gemaakt van de TOOL2MATCH-plugin, is deze functionaliteit onderdeel van de plugin en hoeft onderstaande implementatie niet afzonderlijk te worden uitgevoerd. 

De implementatie bestaat uit de volgende 3 onderdelen:

1. utm_source uit de URL opslaan in localStorage
2. TOOL2MATCH-pixel implementeren
3. Voorkomen van dubbele views

1. UTM_source uit URL opslaan in localStorage

Gebruikers koppelen aan hun campagnes bij een bepaalde mediabron een URL naar de vacaturedetailpagina of het sollicitatieformulier. Een dergelijke URL heeft bijvoorbeeld de volgende structuur: 

https://klant.nl/vacature/123?utm_source=mediabron

De beschikbare utm_source in de URL willen we opslaan in de localStorage. Dit zorgt ervoor dat de mediabron lokaal bewaart blijft indien de kandidaat naar andere pagina's navigeert. 

Wanneer een kandidaat uiteindelijk een sollicitatie verricht, wordt deze broncode uit de localStorage gehaald en meegegeven aan de sollicitatie. Wanneer geen mediabron beschikbaar is, wordt de sollicitatie als "Overige" geregistreerd. 

Let op: wanneer gebruik wordt gemaakt van het TOOL2MATCH-sollicitatieformulier (zie Sollicitatieformulier integreren in website), wordt het ophalen van de mediabron uit de localStorage en het meegeven van deze bron aan de sollicitatie automatisch uitgevoerd. Wanneer het sollicitatieformulier zelf is gebouwd, dient dit proces onderdeel te zijn van de eigen implementatie.  

Te verrichten actie:  

Haal de utm_source uit de URL en sla deze op in de localStorage. Hiervoor kan onderstaande code worden gebruikt:

<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>

<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>

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

De volgende waarden zijn dynamisch: 

De uiteindelijke url in de pixel kan er bijvoorbeeld als volgt uitzien: https://klant.tool2match.nl/jobsite/tp/12345?utm_source=Indeed

Wanneer geen mediabron beschikbaar is, wordt de pixel bijvoorbeeld als volgt geladen: https://klant.tool2match.nl/jobsite/tp/12345?utm_source=

3. Voorkomen van dubbele views

De pixel mag voor dezelfde vacature tijdens één browsersessie maar één view triggeren. 

Wanneer de kandidaat naar andere pagina's binnen de website navigeert en later terugkomt op dezelfde vacature, mag er binnen dezelfde browsersessie niet opnieuw een view worden geregistreerd. 

Hetzelfde geldt wanneer de kandidaat vanaf de vacaturedetailpagina naar een aparte sollicitatiepagina navigeert. De vacaturedetailpagina en de sollicitatiepagina mogen samen dus maximaal één view voor dezelfde vacature registreren binnen dezelfde browsersessie.

Te verrichten actie: 

Controleer voordat de TOOL2MATCH-pixel wordt geladen of voor de betreffende vacature binnen de huidige browsersessie al een view is geregistreerd. 

Hiervoor kan sessionStorage worden gebruikt. Implementeer dit op de vacaturedetailpagina en indien beschikbaar ook op de pagina waar het sollicitatieformulier wordt getoond. 

Hiervoor kan bijvoorbeeld onderstaande code worden gebruikt:

<script>
const viewKey = `t2m_view_registered_${jobId}`;

if (!sessionStorage.getItem(viewKey)) {

    // TOOL2MATCH-pixel laden

    sessionStorage.setItem(viewKey, 'true');
}
</script>