Vælg en side

Som forbruger kender de fleste nok, at når man finder et produkt på en webshop man gerne vil have, at man lige tjekker prisen på produktet andre steder inden man køber. Det gøres ofte ved at kopiere produktnavnet og lave en Google søgning, eller indsætte det i søgefeltet på PriceRunner. 

Hvis man som webshop tilbyder prismatch, kan dette være frustrerende for så kan man potentielt miste salget til en konkurrent, trods at man faktisk kan tilbyde produktet til samme pris til kunden via ens prismatch. 

Scenarie og mål

Scenariet her er, at vi gerne vil aktivere en pop-up som informerer brugeren om vores prismatch politik i det øjeblik brugeren kopierer produktnavnet i deres browser. 

I dette scenarie, anvender jeg en Sleeknote kampagne som pop-up, og Google Tag Manager til at trigger kampagnen, i det øjeblik brugeren markerer produktnavnet i deres browser. 

Hvis man bruger et andet værktøj end Sleeknote, vil man sagtens kunne modificere opsætningen i Google Tag Manager til at virke med et hvilket som helst andet værktøj end lige præcis Sleeknote, så længe det understøtter muligheden for at aktivere kampagnen via et tag i Google Tag Manager.

Bemærk at følgende guide kræver en god forståelse for Google Tag Manager, samt en grundlæggende forståelse for HTML og CSS. Hvis man vil spare lidt tid, har jeg til sidst i vejledningen vedhæftet en fil som kan importeres i Google Tag Manager, som importerer hele nedenstående opsætning.

Trin 1: Variabel som fanger teksten brugeren har markeret i deres browser

Opret en ”Custom Javascript” variabel og tilføje følgende kode i variablen:

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

Den færdige variabel skal se således ud:

Opret en variabel som fanger teksten brugeren har markeret i browseren

Trin 2: Variabel som fanger produktnavnet på produktsider

Hvordan dette gøres, afhænger af kildekoden på ens webshop. Oftest vil produktnavnet have sit eget HTML ID eller Class som kan bruges. I dette eksempel, har produktnavnet på mine produktsider alle den samme HTML Class som jeg kan bruge. 

Dette gøres ved at oprette en ”DOM Element” variabel og tilføje min class som ”CSS Selector”.

Sådan her ser HTML’en ud for produktnavnet:

HTML produktnavn

Her kan jeg bruge den Class som hedder “o-product-detail__name” til at lave følgende variabel:

DOM Element variabel som fanger produktnavnet

Trin 3: Lookup table variabel

Nu har vi to forskellige variabler, hvor den ene indeholder teksten brugeren har kopieret i browseren, og den anden indeholder produktnavnet på den produktside brugeren ser. Nu skal vi forbinde de to, til at lave en tredje variabel, som enten er TRUE eller FALSE. Hvis den er TRUE, så matcher den kopieret tekst i browseren med produktnavnet, og hvis den er FALSE, så matcher de ikke. 

Kort fortalt, hvis brugeren har kopieret produktnavnet, så har vi en TRUE variabel.

Dette gøres ved at lave en ”Lookup Table” variabel.

Under ”Input Variable” vælges vores vores variabel fra trin 1.

Under ”Lookup Table” laves en ny række, og variablen fra trin 2 indsættes i ”Input”.

I ”Output” skrives der ”true”.

Derudover sættes ”Default Value” til ”false”.

Den færdige variabel ser således ud:

true false variabel for kopieret tekst i browser

Trin 4: Sleeknote SiteData

Nu har vi ”logikken” på plads i Tag Manager, og nu skal vi bruge Sleeknote. Hvis man ikke bruger Sleeknote, er det nu man skal afvige fra guiden og tilpasse sig til det værktøj som man anvender. 

Til denne type Sleeknote kampagne, har jeg bedst erfaring med at anvende det SiteData som Sleeknote anvender. Til det skal vi bruge to forskellige tags, ét som giver ”false” værdien til Sleeknote på alle sidevisninger, og et som ændre det til ”true” så snart brugeren har kopieret produktnavnet i deres browser.

Opret et ”Custom HTML” tag og indsæt nedenstående kode snippet:

<script>
window.sleeknoteSiteData || (window.sleeknoteSiteData = []);
window.sleeknoteSiteData.push({'kopieret': {{true/false for product name highlight}}});
</script>

”kopieret” værdien, er et statisk navn vi giver vores variabel som enten er ”false” eller ”true”. Dette kan du navngive som du vil. Værdien af dette er variablen fra trin 3, og her skal du huske at ændre navnet på variablen i koden, hvis du har navngivet din variabel anderledes end mit eksempel fra trin 3.

Tagget skal aktiveres på alle sidevisninger og ser således ud i mit eksempel:

Sleeknote tag på alle sider

Nu skal vi oprette det samme tag igen, men med en anden trigger – Så opret præcis det samme tag her fra trin 4 igen, eller lav en kopi af det nyoprettede tag. Den eneste forskel der er på det nye tag, er en anden trigger som skal være en Click trigger.

Opret en ”Click – All Elements” trigger og indsæt variablen fra trin 3 som skal være lig med ”true”.

Click - All elements trigger

Den nye trigger tilføjes på tagget så det ser således ud:

Sleeknote SiteData ved kopieret tekst

Trin 5: Sleeknote kampagne

Nu er vi færdige i Google Tag Manager. Husk at publicere alle ændringer i containeren. 

Kampagnen i Sleeknote kan nu oprettes, og hvordan den skal se ud, er selvfølgelig helt op til en selv, så det vil jeg ikke gå i detaljer med. Dog vil jeg anbefale at bruge en ”Guide your visitors” kampagne, gøre den centreret så brugeren ikke kan undgå at se den. 

I kampagnen kan der under ”Display settings” tilføjes en SiteData trigger. Denne skal se således ud:

Sleeknote SiteData kampagne trigger

Færdiggør kampagnen og aktiver den. 

Forhåbentlig bliver kampagnen nu aktiveret, hver gang en bruger kopierer produktnavnet fra en af dine produktsider på din webshop. 

Jeg vil selvfølgelig anbefale, at man undervejs i ovenstående opsætning, tester de forskellige variabler, triggers og tags af ved at ”Preview” ens opsætning i Google Tag Manager. 

Hvis man gerne vil snyde lidt, har jeg eksporteret ovenstående opsætning fra min container og gjort den tilgængelig her. Den kan importeres direkte i din Google Tag Manager, bare husk at tilrette de forskellige variabler til at matche kildekoden på din webshop.

Hvad kan man ellers bruge ovenstående opsætning til?

Hvis man har opsat og implementeret ovenstående opsætning, er der intet i vejen for at anvende variablerne til andre anvendelser end en Sleeknote kampagne.

Man kunne eksempelvis:

  • Sende teksten brugeren har markeret i browseren ind som et event til Google Analytics
  • Lave et Google Analytics event eller et Facebook Pixel event til målretning i Facebook eller Google Ads for dem som har markeret et produktnavn (eller hvilket som helst andet tekst på ens hjemmeside eller webshop)
  • Sleeknote kampagner med et andet budskab end prismatch, det kunne være hvis brugeren markerer en e-mailadresse, så kunne man vise en kampagne med kontaktoplysninger eller en kontaktformular. 

Opsætningen er ikke bundet til et produktnavn, og kan som sagt anvendes til en hvilken som helst tekst på ens hjemmeside. 

Hvis du har fulgt guiden, og oplever udfordringer med at få det til at virke, så tøv ikke med at skrive en kommentar nedenfor, eller kontakt mig direkte på hej@kaspermedk.dk også vender jeg tilbage hurtigst muligt.