Cookiefunktionalitet (for udviklere)

I denne artikel:

Introduktion

I forbindelse med de nye regler for cookies, har vi implementeret cookiefunktionalitet i shopsystemet, som giver mulighed for at leve op til vejledningerne fra Erhvervsstyrelsen og Datatilsynet.

Opdateringen omfatter en række tiltag der skal gøre det lettere for shop ejere selv at tilpasse systemet. Det kan dog være nødvendigt at foretage tilpasning af kode f.eks. for at sikre at egne scripts ikke sætter cookies i kundens browser, inden kunden har givet samtykke mv. Denne guide er rettet mod udviklere og kræver erfaring med arbejde i shoppens template filer.

Bemærk: Indholdet i denne artikel forudsætter at du har læst følgende artikler:

Features

Som en fortsættelse af vores introduktion til den nye cookiefunktionalitet i Hostedshop vil vi nu gennemgå features i forbindelse med håndtering af cookies i Hostedshop.

Cookie liste

Ifølge de nye regler skal alle besøgende have lov til selv at vælge, hvilke typer cookies en side må sætte (nødvendige system-cookies er undtaget -læs mere her). Derudover kræver reglerne, at det tydeligt skal fremgå hvilke cookies der bliver sat, både på det primære domæne og via tredjepart på andre domæner. Oversigten skal indeholde meta-data om cookies såsom udløbsdato og ophav.

I systemet er dette løst via to lister som samles til én liste i cookie samtykke pop-uppen, og på cookiepolitik siden:

En liste, der lister cookies fra core-funktioner. Denne vedligeholdes internt af os. Den inkluderer sessionscookies og cookies fra features som Google Analytics, Addwish, Viabill m.fl.
En liste til den enkelte template, der skal indeholde alm. og tredjepart-cookies der tilføjes via scripts og apps.

Listen til den enkelte template kan enten vedligeholdes via shoppens administration (læs mere her), eller manuelt som beskrevet senere i denne artikel.

Tilbageholdelse af cookies

Inden kunden har foretaget sit valg i samtykke pop-uppen, er det kun system-cookies der må sættes i browseren -altså cookies der er teknisk nødvendige for at siden fungerer korrekt.

Det betyder at flere scripts ikke nødvendigvis må eksekveres når en landingsside rammes. Vi har indsat kodeeksempler i guiden her for at vise hvordan man nemmest sporer hvilket samtykke den besøgende har givet. Dette omfatter også vores egne standard-funktioner i shoppens frontend hvor man skal være opmærksom på, at uden samtykke til tracking-cookies vil følgende funktioner ikke vises:

Viabill pricetag
Sociale delingsknapper

Tilbagetrækning af samtykke

Det skal være muligt for den besøgende at ændre et allerede givet samtykke. Dette betyder, at egne implementerede scripts som sætter cookies på shoppens primære domæne, skal have inkluderet funktionalitet til at slette de pågældende cookies igen. Vores juridiske afdeling har udarbejdet en vejledende cookiepolitik, der henviser til hvordan man kan slette cookies manuelt, da det ikke er muligt at slette cookies sat på tredjeparts domæne. Udover metoden til tilbagetrækning af samtykke som beskrevet i vores introduktion, viser vi også en alternativ metode senere i denne artikel.

Administrationspanel til cookie beskrivelser

Via shoppens administration er det muligt at tilføje og redigere egne cookie beskrivelser, der ikke er en del af standardbeskrivelserne i Hostedshop. Du kan læse mere om denne funktionalitet her.

Manuel oprettelse af cookiebeskrivelser

Det er muligt at oprette cookiebeskrivelser manuelt i shoppens designfiler. Du finder listen til cookiebeskrivelser i shoppens design template under source > settings > cookies > cookies.list.json. Koden er opdelt i kategorier svarende til de kategorier vi gennemgik tidligere i artiklen, med undtagelse af "uncategorized" (ikke kategoriseret), som kan benyttes midlertidigt under fastsættelse af kategorisering, på en inaktiv design template. Bemærk: Uanset kategorisering er det stadigt shop ejers opgave at håndtere egne cookies i forhold til de gældende regler.

I dette eksempel har vi indsat en beskrivelse på to sprog for en påkrævet (required) cookie, og vist hvordan beskrivelsen præsenteres i cookieboksen:

Bemærk at udløb for ovenstående cookie er angivet som "Session". Havde udløbet f.eks. været 1 år, skulle dette være anført ud for "expiration" i stedet.

Hvis du ønsker at slå en cookiebeskrivelse til eller fra på baggrund af en indstilling i shoppen, kan dette gøres som i følgende eksempel, ved at tilføje parameteret "requires", der referere ét eller flere indstillinger:

Vil man basere visningen på flere indstillinger, indsættes værdierne kommasepareret: Så længe ét af kriterierne er opfyldt aktiveres beskrivelsen.

Beskrivelser indsat som "uncategorized" vises som "Ikke kategoriseret" i cookie samtykke pop-uppen. Bemærk: Uanset kategorisering er det stadigt shop ejers opgave at håndtere egne cookies i forhold til de gældende regler.

Cookie samtykke log i administrationen

Dette er en oversigt over samtykke givet af kunden med henvisning til "Retten til indsigt og retten til at blive glemt". Slutkunden kan findes via IP, og ellers vil man kunne se de cookietyper der er givet samtykke til. Du kan læse om funktionen i denne artikel.

Indlejring af cookiebeskrivelser og knap til tilbagetrækning af samtykke

Som beskrevet i vores introduktion er det muligt at indsætte tags (#COOKIEDETAILS# og #COOKIEREMOVE#) på den indholdsside man har valgt til sin cookiepolitik, under Indstillinger > Webshopindstillinger > Generelt > Link til cookie betingelser. Disse tags virker dog kun på den side man har valgt i shoppens indstillinger. Hvis man ønsker at indsprøjte indholdet på andre indholdssider i shoppen, kan det gøres ved at indsætte følgende HTML-tags i kilden:

        
        <div data-inject="cookiedetails">&nbsp;</div>
        <div data-inject="cookieremove">&nbsp;</div>

Opsætning af cookie samtykke pop-up

Du kan læse mere omkring opsætningen af cookie samtykke pop-uppen i denne artikel, som vil blive offentliggjort i vores hjælpeunivers når vi går live med opdateringen.

Hjælp til teknisk troubleshooting

Samtykke pop-up vises ikke

Dette kan skyldes to ting:

I dine skabelonindstillinger har du ikke sat din cookie-type indstilling til cookie samtykke.
At "index.tpl" er tilpasset.

Hvis det skyldes en tilpasset index.tpl (punkt 2), kan det løses ved at tilføje kodestumpen nedenfor til index.tpl, lige før {body_include}:

    
    {* Cookie consent *}
    {include file="modules/widgets/cookie/cookie.tpl"}

Samtykke pop-up ligner noget rod i bunden af siden

Dette skyldes at struktureret styling af cookie-samtykke ikke er til stede, sandsynligvis fordi følgende filer er tilpasset: source/scss/template.scss eller source/scss/template.structure.scss.

Trin 1:

Start med at inkludere de manglende filer til source/scss/template.scss eller source/scss/template.structure.scss, alt efter templaten.

    
        // Libs
        @import "libs/elements/accordion";
        @import "libs/elements/switch";

Og derefter tilføjes denne linje til source/scss/modules/widgets/\_widgets.scss

    
        @import "cookie/cookie";

Trin 2:

Dette er den kompilerede version af den strukturelle scss, som vi får fra de filer vi inkluderede ovenfor. Det skal tilføjes til slutningen af filen assets/css/template.css eller assets/css/template.structure.css, igen alt efter templaten:

    
        .w-cookie{top:0;z-index:9999999;width:100%;display:flex;justify-content:center;align-items:center;position:fixed;height:100%;background:rgba(0,0,0,0.2)}.w-cookie-form{position:relative;border-radius:3px;max-width:90vw;overflow:hidden}.w-cookie-loader{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center}.w-cookie-loader .svg-spinner{height:72px;weight:72px;padding:0}.w-cookie-options{display:-ms-grid;display:grid;grid-gap:10px;-ms-grid-columns:1fr 1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr 1fr}.w-cookie-actions{display:flex;justify-content:center}.w-cookie-consent{overflow-y:auto;opacity:1;transition:all .255s ease;margin:2em}.w-cookie-listing{max-height:0px;overflow-y:hidden;opacity:0;transition:all .255s ease}.w-cookie-extended-info,.w-cookie-description{transition:all .255s ease;overflow-y:hidden}.extended-open .w-cookie-description,.w-cookie-consent:not(.extended-open) .w-cookie-extended-info{max-height:0px !important;opacity:0}.toggle-extended .fa{transition:all .255s ease;transform:rotate(0deg)}.toggle-extended:not(.is-closed) .fa{transform:rotate(90deg)}.w-cookie-toggle-consent-show{display:none}.w-cookie-toggle{flex-direction:column;align-items:center;text-decoration:none;transition:all .255s ease}.w-cookie-toggle.button.cookie-button{display:flex;margin:0 auto}.w-cookie-toggle.button.cookie-button:not(.is-closed){border-radius:2px 2px 0px 0px;border-bottom:0px}.w-cookie-toggle.button.cookie-button.is-closed{border-radius:0px 0px 2px 2px;border-top:0px;flex-direction:column-reverse}.w-cookie-toggle.button.cookie-button.is-closed .fa{transform:rotate(180deg)}.w-cookie-details .w-cookie-listing{max-height:80vh;overflow-y:auto;opacity:1;margin:2em 0px .5em}.w-cookie-details .w-cookie-consent{max-height:0px !important;overflow-y:hidden;opacity:0;transition:all .255s ease;margin:0px 2em}.w-cookie-details .w-cookie-toggle-details-show{display:none}.w-cookie-details .w-cookie-toggle-consent-show{display:block}.w-cookie-consent feildset:nth-child(1){-ms-grid-column:1}.w-cookie-consent feildset:nth-child(2){-ms-grid-column:2}.w-cookie-consent feildset:nth-child(3){-ms-grid-column:3}.w-cookie-consent feildset:nth-child(4){-ms-grid-column:4}@media only screen and (max-width: 600px){.w-cookie-options{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}}.w-cookie-option-title{margin-bottom:5px}.w-cookie-consent feildset{display:flex;padding:0;flex-direction:column;align-items:center;flex:1}.w-cookie-consent{overflow-y:auto;line-height:1.4}.w-cookie-consent::-webkit-scrollbar,.w-cookie-list::-webkit-scrollbar{-webkit-appearance:none;width:5px}.w-cookie-consent::-webkit-scrollbar-thumb,.w-cookie-list::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,0.3);-webkit-box-shadow:0 0 1px rgba(255,255,255,0.5);box-shadow:0 0 1px rgba(255,255,255,0.5)}.w-cookie-link{margin-top:1.5em}@media screen and (min-width: 768px){.w-cookie-actions button{margin:0 0.5em}.w-cookie.center .w-cookie-form{max-width:768px}.w-cookie.top-static{position:static}.w-cookie:not(.center){height:auto;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.w-cookie.bottom{top:auto;bottom:0}}.w-cookie.center{background:rgba(0,0,0,0.2)}.w-cookie.center .w-cookie-form{box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.button-primary.cookie-button,.button.cookie-button,.button-text.cookie-button{border-radius:2px;height:46px;padding:0 1em;font-size:1em;display:inline-flex;justify-content:center;align-items:center;line-height:1;outline-color:transparent}.cookie-button.button-text-simple{font-size:1em;line-height:1;padding:0px;text-decoration:none !important;background:transparent;outline-color:transparent}.accordion-section{transition:all .255s ease;border-top:0px;padding:0px 10px;border-radius:0px 0px 3px 3px;overflow:hidden;opacity:1}.accordion-section>:first-child{padding-top:10px}.accordion-section>:last-child{padding-bottom:10px}.accordion-btn{min-height:36px;padding:2px 10px 2px 0px;width:100%;border:2px solid currentColor;border-color:currentColor !important;border-radius:3px;background:transparent;text-align:left;line-height:1;display:grid;display:-ms-grid;grid-template-columns:46px 1fr;-ms-grid-columns:46px 1fr;align-items:center;outline:none;border-radius:3px 3px 0px 0px}.accordion-btn .fa{transition:all .125s ease;transform:rotate(0deg);pointer-events:none;height:18px;margin:auto;font-size:18px;-ms-grid-column:1}.accordion-btn .accordion-text{pointer-events:none;-ms-grid-column:2}.accordion-btn .accordion-text .accordion-title{line-height:2;font-weight:600}.closed .accordion-section{max-height:0px !important;overflow-y:hidden;border:2px solid transparent;opacity:0}.closed .accordion-btn{border-radius:3px}.closed .accordion-btn .fa{transform:rotate(-90deg)}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.switch-rail{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;-webkit-transition:.225s;transition:.225s;border-radius:3px}.switch-rail:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;-webkit-transition:.4s;transition:.4s;border-radius:3px;transition:box-shadow .255s ease}input:disabled+.switch-rail{opacity:60%}input:checked+.switch-rail:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}

Samtykke pop-up er gennemsigtig

Dette er fordi den mangler den farvemæssige CSS. Disse linjer skal tilføjes til template.theme.scss, og kan placeres i deres respektive kategorier eller blot i bunden af filen:

    
        // Libs
        @import "theme/libs/elements/accordion";
        @import "theme/libs/elements/switch";

        // Modules
        @import "theme/modules/widgets/cookie/cookie";

Når de er tilføjet skal du klikke Gem i ret design på templaten.

"Læs mere om cookies" og "Vis cookie detaljer" virker ikke

Dette skyldes sandsynligvis, at løsningen har fjernet TorqueUI fra dens js, eller har fjernet app.js helt. I de fleste tilfælde ville der være behov for en teknisk person (designpartner eller udvikler) her. Her kan du læse om TorqueUI. Men hvis du bare ønsker at komme i gang, er dette den krævede fil: collapsable.js.

Min cookie liste vises ikke

Så fungerer en hel del af integrations blokkerne heller ikke. Men dette skyldes sandsynligvis at filen partials/body.tpl er tilpasset. Følg trinnet nedenfor, og gå derefter videre til det næste afsnit "Nogle eller flere af mine cookies blokeres ikke"...

Indsæt dette uddrag omkring linje 9 før exports.platform.language

    
        exports.platform.cookies = {$smarty.cookies|jsonify};
        exports.platform.client = {$client|jsonify};
        exports.platform.consent = {$cookieConsent.consent|jsonify};
        exports.platform.cookielist = {
            internal: {$cookieConsent.lists.internal},
            external: {$cookieConsent.lists.external}
        };

Blokering af scripts

For at blokere scripts der sætter cookies, skal man starte med at identificere og kategorisere den eller de cookies som scriptet benytter. Måden man kategoriserer cookies på, er baseret på hvad cookien benyttes til, og dette gælder både for webshoppen men også cookies fra tredjeparts service providers. Vi har kategoriseret cookies således ud fra anvisningerne (som beskrevet her): REQUIRED, FUNCTIONAL, STATISTICS og MARKETING.

Når cookien er kategoriseret, kan man blokere scriptet ved at benytte $cookieConsent.consent variablen, og tjekke op imod den eller de kategorier af cookies som scriptet benytter:

    
        {if (isset($cookieConsent.consent) && $cookieConsent.consent['FUNCTIONAL'])}
        <script src="https://www.thirdparty.src/?id=helloYou" type="text/javascript"></script>
        {/if}

Nogle eller flere af mine cookies blokeres ikke

Dette skyldes sandsynligvis brugen af tredjepartsintegrationer, men kan også skyldes indlæsning af andre scripts via google-tag manager. Hvis det er tilfældet, er der brug for en teknisk person (designpartner eller udvikler) til at hjælpe med at identificere, kategorisere og derefter blokere scripts baseret på klientens samtykkevariabler.
Hvis det normalt er en del af vores opsætning, er partials/body.tpl sandsynligvis tilpasset (i hvilket tilfælde næsten intet af cookie.js vil fungere) eller en integration inde i moduler/widgets/integrationer. I denne case er der sikkert andre scripts som skal undersøges, men med vores standard integrationer er det muligt at referere til en standard template og tilføje blokerne derfra.

Fjern cookies og cookie liste vises ikke på min cookiepolitikside

Dette kan skyldes flere årsager:

Cookiepolitiksiden er ikke registreret som cookiepolitikside under Indstillinger > Webshopindstillinger > Generelt > Link til cookie betingelser.
text.tpl er tilpasset, hvis det er tilfældet er du nødt til, at opdatere filen (se hvordan herunder). Filen er placeret under modules > text i designfilerne.

Indsæt denne kodestump omkring linje 45 før <div class="modules m-text">

    
        {if $settings.cookies_link === $page.id}
            {$detailsReplacement = '<div data-inject="cookiedetails"></div>'}
            {$removeReplacement = '<div data-inject="cookieremove"></div>'}
            {$pageText = $pageText|strtr:[
                '<p>#COOKIEDETAILS#</p>' => $detailsReplacement,
                '#COOKIEDETAILS#' => $detailsReplacement,
                '<p>#COOKIEREMOVE#</p>' => $removeReplacement,
                '#COOKIEREMOVE#' => $removeReplacement
            ]}
        {/if}

Cookiefunktionalitet (for udviklere)

I denne artikel:

Introduktion

Features

Cookie liste

Tilbageholdelse af cookies

Tilbagetrækning af samtykke

Administrationspanel til cookie beskrivelser

Manuel oprettelse af cookiebeskrivelser

Cookie samtykke log i administrationen

Indlejring af cookiebeskrivelser og knap til tilbagetrækning af samtykke

Opsætning af cookie samtykke pop-up

Hjælp til teknisk troubleshooting

Samtykke pop-up vises ikke

Samtykke pop-up ligner noget rod i bunden af siden

Trin 1:

Trin 2:

Samtykke pop-up er gennemsigtig

"Læs mere om cookies" og "Vis cookie detaljer" virker ikke

Min cookie liste vises ikke

Blokering af scripts

Nogle eller flere af mine cookies blokeres ikke

Fjern cookies og cookie liste vises ikke på min cookiepolitikside

Nyttige links

Tusind tak!

Var denne artikel hjælpsom?

Vi beklager ulejligheden.

Hvad er der galt med artiklen?

Tak for din feedback

Kunne vi gøre denne artikel bedre?

I denne artikel:

Introduktion

Features

Cookie liste

Tilbageholdelse af cookies

Tilbagetrækning af samtykke

Administrationspanel til cookie beskrivelser

Manuel oprettelse af cookiebeskrivelser

Cookie samtykke log i administrationen

Indlejring af cookiebeskrivelser og knap til tilbagetrækning af samtykke

Opsætning af cookie samtykke pop-up

Hjælp til teknisk troubleshooting

Samtykke pop-up vises ikke

Samtykke pop-up ligner noget rod i bunden af ​​siden

Trin 1:

Trin 2:

Samtykke pop-up er gennemsigtig

"Læs mere om cookies" og "Vis cookie detaljer" virker ikke

Min cookie liste vises ikke

Blokering af scripts

Nogle eller flere af mine cookies blokeres ikke

Fjern cookies og cookie liste vises ikke på min cookiepolitikside

Nyttige links

Tusind tak!

Var denne artikel hjælpsom?

Vi beklager ulejligheden.

Hvad er der galt med artiklen?

Tak for din feedback

Kunne vi gøre denne artikel bedre?

Samtykke pop-up ligner noget rod i bunden af siden