Hoppa till innehållet

Installations­anvisningar

Lägg till CookieTractor på webbplatsen

Börja med att inkludera CookieTractors script på webbplatsen. Ert specifika script finns i inställningsverktyget: välj tabben Installation och kopiera scriptet (observera att ni inte bör spara ner scriptet till er egen webbserver, då lösningen slutar fungera när vi gör framtida uppdateringar). Lägg in scriptet på alla sidor, så högt upp som möjligt inuti head-taggen. Placeringen är extra viktig om ni förlitar er på att CookieTractor automatiskt ska byta ut filmer från YouTube eller Vimeo till versioner utan cookies. Av samma anledning bör vårt script inte laddas in via Google Tag Manager eller liknande verktyg.

När CookieTractor är på plats är det dags att konfigurera scripten som sätter cookies på webbplatsen så att dessa respekterar användarens val för samtycke. CookieTractor blockerar inte automatiskt några script, så det är viktigt att hantera alla script som sätter cookies på sajten. Under fliken Cookies i inställningsverktyget kan ni sätta igång en genomsökning för cookies på webbplatsen om detta inte gjordes när webbplatsen lades till. Notera att det kan sättas fler cookies än de som hittats, så kontrollera att alla script hanteras.

Vår lösning har inbyggt stöd för flera populära tagghanterare, läs mer om hur man ställer in respektive lösning här:

JavaScript events och funktioner vid User Consent

Om ni inte använder en tagghanterare kan ni använda vanliga JavaScript-events för att ladda in script baserat på besökarens val.

Lyssna efter eventet "CookieConsent" för att köra din kod:

window.addEventListener('CookieConsent', function (event) {
    console.log('CookieConsent:', event.detail);
});

Detta event skickar med detaljer om händelsen, här är ett exempel på payload i event.detail:

{
    added : ['marketing'],
    removed : [],
    current : ['undefined','necessary','marketing'],
    trigger : 'initial'
}

Förklaring av egenskaper:

  • added Innehåller kategorier där medgivande adderats som en följd av händelsen.
  • removed Innehåller kategorier som där medgivandet dragits tillbaka som en följd av händelsen.
  • current Innehåller alla medgivanden som finns efter händelsen.
  • trigger Indikerar vad som utlöste händelsen, kan ha följande värden:
    • initial = Indikerar att detta för det första medgivandet från en besökare efter att den gjort sitt första val i rutan.
    • pageload = Indikerar att detta är en efterkommande sidladdning där ett medgivande existerar.
    • update = Indikerar att besökaren öppnat cookie-inställningar och ändrat sitt medgivande.

Här är ett exempel på kod som körs när det finns ett medgivande för marketing-cookies

window.addEventListener('CookieConsent', function (event) {
    if(!event.detail.current.includes('marketing'))
        return;
        
    console.log('We have marketing consent!');
});

Vill ni lyssna på när en användare tar bort ett samtycke:

window.addEventListener('CookieConsent', function (event) {
    if(event.detail.trigger !== 'update')
        return;
        
    console.log('Added consents',event.detail.added);
    console.log('Removed consents',event.detail.removed);
});

Ni kan även testa om ett medgivande redan är satt med kod:

if (cookieTractor.consent.contains(cookieTractor.category.functional)){
    console.log('Medgivande finns för funktionella-cookies');
}
if (cookieTractor.consent.contains(cookieTractor.category.statistical)){
    console.log('Medgivande finns för statistik-cookies');
}
if (cookieTractor.consent.contains(cookieTractor.category.marketing)){
    console.log('Medgivande finns för marknadsförings-cookies');
}

Här är ett exempel på hur man med vanilla events kan ladda ett javascript baserat på medgivande:

window.addEventListener('CookieConsent', function (event) {
    if(!event.detail.current.includes('marketing'))
        return;
    
    var script = document.createElement('script');
    script.src = "https://cdn.somewebsite.com/my-script.js";

    // use another target than head if necessary
    document.getElementsByTagName('head')[0].appendChild(script);
});

Mer information om vårt SDK finns på sidan om JavaScript Reference!

Consent Mode v2 är en teknik från Google som gör det möjligt att använda vissa av Googles taggar och script utan att cookies sätts fram tills dess att användaren angett samtycke för användning. Utan medgivande kommer Google att genomföra en begränsad spårning av trafiken och eventuella konverteringar. Fördelen med Consent Mode är att man då kan se statistik och konverteringar trots att besökaren inte givit oss medgivande för cookies.

I dagsläget stöds Consent Mode v2 av följande Google-produkter:

  • Google Analytics
  • Google Ads (Google Ads Conversion Tracking & Remarketing)
  • Floodlight

Vår lösning stödjer alla de definerade Consent Types som finns inom ramen för Consent Mode v2:

  • functionality_storage, vid medgivande för nödvändiga.
  • security_storage, vid medgivande för nödvändiga.
  • analytics_storage, vid medgivande för statistik.
  • ad_storage, vid medgivande för marknadsföring.
  • ad_user_data, vid medgivande för marknadsföring.
  • ad_personalization, vid medgivande för marknadsföring 
  • personalization_storage, vid medgivande för marknadsföring.

Vi uppdaterar automatiskt de underliggande APIerna i Google Consent Mode v2 och detta fungerar både tillsammans med global site tags (gtag.js) och Google Tag Manager.

Komma igång:

För er som använder Google Tag Manager så rekommenderar vi fortfarande att ni implementerar och använder de Triggers som vi nämner ovan för alla Taggar/Script som inte har stöd för Google Consent Mode v2. De taggar/script som stödjer Consent Mode v2 bör använda den inbyggda triggern All Pages, på så sätt laddas Taggen alltid in men anpassar sitt beteende baserat på besökarens medgivande.

Testa att Consent Mode v2 fungerar med Google Analytics:

  1. Radera alla cookies och ladda om sidan.
  2. Nu ska du se vår cookie popup, och en request till *.google-analytics.com ska ha skickats med en querystring som inkluderar gcs=G100. Detta betyder att Analytics anropats men utan medgivande för cookies.
  3. I detta läge ska ingen cookie som börjar på _ga ha sparats på domänen.
  4. Klicka sedan på "Acceptera alla" i vår dialog-rutan. Inom ett par sekunder ska cookies med namnet _ga skapats vilket indikerar att analytics-taggen snappat upp det uppdaterade medgivandet och börjat använda cookies.

Det går också att använda Google Tag Assistant. Där går det att följa hela flödet med vilka samtycken som är lämnade när. 

Har ni problem att få igång Consent Mode, kontakta oss gärna på info@cookietractor.se i första hand. Google kan förstås hjälpa till, men vi tar det gärna. 

Vi har inbyggt stöd för Microsoft Universal Event Tracking (UET) Consent Mode. Det innebär att vi automatiskt kommer att sätta inställningar baserat på besökarens medgivanden.

Vår lösning implementerar detta enligt Microsofts intruktioner, vilket innebär att vi:

  • Sätter ad_storage till denied som default
  • Uppdaterar värdet för ad_storage till granted när/om besökaren ger sitt medgivande.

Cookie-rutan kan öppnas igen av besökaren genom att klicka på en knapp eller länk. Den placerar ni någonstans på sajten, förslagsvis i sidfoten. Det finns två sätt att utforma den:

1. Infoga en knapp eller länk med class-attributet "cookie-consent-settings"

<button class="cookie-consent-settings">Inställningar för cookies</button> 
... eller:
<a href="javascript:void(0)" class="cookie-consent-settings">Inställningar för cookies</a>

2. Infoga en knapp eller länk som triggar clickeventet "cookieTractor.openConsentSettings()":

<button onclick="cookieTractor.openConsentSettings()">Inställningar för cookies</button> 
... eller:
<a href="javascript:cookieTractor.openConsentSettings()">Inställningar för cookies</a>
... självklart kan eventet läggas till på vilket klickbart element som helst med hjälp av javascript. 

När användaren ändrar sina inställningar raderas de cookies som går att radera från besökarens webbläsare baserat på de uppdaterade inställningarna. Tredjeparts-cookies kan vi inte radera, varför ni bör informera om hur dessa tas bort i webbläsaren på er sida om personuppgiftspolicy.

Anpassa utseendet

Cookie-frågan kan anpassas för att följa er grafiska profil. De vanligaste anpassningarna kan justeras i inställningsverktyget under fliken Design. Här kan ni ange typsnitt, justera den primära färgen samt ändra på rundningen på cookie-frågan och knapparna.

Vill ni justera andra delar av utseendet går det att skriva egen CSS-kod. I inställningsverktyget finns en inbyggd editor för detta ändamål. Alla designjusteringar är därmed möjliga att göra i inställningsverktyget; ni behöver inte lägga till CSS-kod på er webbplats.

Det finns möjlighet att infoga en lista med alla era cookies på valfri sida på er webbplats. Under listan visas även användarens nuvarande samtyckesval. På sidan där cookie-listan ska visas behöver ett script läggas till. Sedan placeras en div-tagg ut där listan ska visas. Scriptet och div-taggen hittar ni under fliken Installation i inställningsverktyet.

Cookie-listan utgår från utseendet på er webbplats. Om sidan saknar CSS-egenskaper för typsnittet i html eller body-taggen kan texten se liten eller konstig ut. Det går att justera detta genom att ange CSS-kod under fliken Design. Man kan till exempel skriva { font-size: 18px; } för att sätt textens storlek till 18px. Givetvis går det även att justera andra egenskaper för ett mer anpassat utseende.

Begränsa sidor som genomsöks för cookies

Det är möjligt att begränsa vilka sidor på webbplatsen som ska genomsökas för cookies. Till exempel ett forum eller en webbshop, där man vet att cookies som sätts är samma för alla instanser av en given sidtyp. I inställningsverktyget under fliken Settings > Crawler limits kan man ange ett RegEx uttryck som anger vilka sidor som ska ha begränsningar i sökningen efter cookies. Man anger sedan Crawl pages, vilket är hur många av dessa sidor som matchar RegEx uttrycket som ska genomsökas för cookies. Anger man den till 10 så kommer vi söka av de 10 första sidorna som hittas och ignorera resterande.

För att begränsa sidor som ligger under t.ex. shop/ så anger man uttrycket: shop\/*  

Man kan behöva begränsa sidor som har en query i URL:en, vilket kan göras med uttrycket: *\?*

Testa gärna RegEx uttrycket för att kolla att det fungerar som det ska, exempelvis på regex101.

Undanta cookiefrågan från en enskild sida

Man kan undanta en eller flera sidor där man inte vill att cookie-frågan ska visas. På så sätt kan exempelvis sidor med personuppgifts­policy som länkas till från cookie-frågan visas utan att besökaren behöver lämna samtycke. Denna sida kommer då inte ladda något script som kräver samtycke. Man gör detta genom att skriva in css-klassen cc-hidden vart som helst i markupen på sidan, exempelvis i brödtext som kommer från ett CMS.

Om er webbsida använder css-klassen cc-hidden i ett annat syfte kommer detta att dölja vår cookie-fråga. För att tvinga fram rutan kan ni då addera css-klassen cc-hidden-ignore någonstans på sidan.

Inaktivera video-wrapper

CookieTractor byter automatiskt ut YouTube och Vimeo videos till varianter utan cookies. Vill ni inte använda denna funktionalitet kan den inaktiveras genom att lägga till följande attribut i CookieTractor script-taggen.

data-disable-youtube-wrapper="true"
data-disable-vimeo-wrapper="true"

CSP:Blocked

De servrar som har content-security-policy som blockerar anrop till icke tillagda värdar behöver godkänna både *.cookietractor.com då vi använder flera olika subdomäner för tjänsten.

Support

Har ni frågor om installationen kontakta oss på info@cookietractor.se.