Osano Cookie Consent on avoimen lähdekoodin ohjelma, jota käyttämällä verkkokaupan asiakkaalle voidaan näyttää evästelaatikko.
Käsittelemme tällä sivulla Osano Cookien Consentin ja Facebook-pikselin tekniikkaa. Jos osaat ne jo valmiiksi, niin sinulle riittää tieto, että voit lisätä koodia verkkokaupan hallintaliittymän asetukset / koodit ja ulkoasu -kohtaan.
Tässä työssä tarvitaan
Lisää evästelaatikon JavaScript-koodiin vihreällä korostettu koodi ja poista siitä punaisella korostettu koodi. Huomioi, että vihreällä korostettu koodi alkaa edellisen rivin lopussa olevalla pilkulla. Korvaa evästeiden teksti (message) haluamallasi tekstillä. Korvaa tietosuojaselosteen verkko-osoite (href) haluamallasi verkko-osoitteella. Korvaa verkkotunnus (domain) verkkokaupan verkkotunnuksella. Älä kirjoita verkkotunnukseen www-alkuosaa.
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#000"
},
"button": {
"background": "#f1d600"
}
},
"position": "bottom-left",
"type": "opt-in",
"content": {
"header": "<fi>Käytämme evästeitä!</fi><en>Cookies used on the website!</en>",
"message": "<fi>Käytämme evästeitä mainosten kohdentamisessa.</fi><en>This website uses cookies to personalise ads.</en>",
"dismiss": "<fi>Selvä!</fi><en>Got it!</en>",
"allow": "<fi>Salli evästeet</fi><en>Allow cookies</en>",
"deny": "<fi>Kiellä</fi><en>Decline</en>",
"link": "<fi>Lue lisää</fi><en>Learn more</en>",
"href": "<fi>https://www.example.com/tietosuoja.html</fi><en>https://www.example.com/privacy.html</en>",
"close": "❌",
"policy": "<fi>Evästekäytännöt</fi><en>Cookie Policy</en>",
"target": "_blank",
},
"cookie": {
"domain": "example.com",
"name": "cookieconsent_status1",
"expiryDays": "365",
}
});
</script>
Vaihda nimi (name) aina, kun evästeiden käyttötarkoitus muuttuu niin paljon, että verkkokaupan asiakkailta on pyydettävä uusi suostumus.
Evästelaatikon ulkoasuasetukset (palette) kannattaa poistaa, kuten yllä on tehty. Ulkoasua voi muokata paljon yksityiskohtaisemmin lisäämällä ulkoasutyylit verkkokaupan hallintaliittymän asetukset / koodit ja ulkoasu -kohtaan. Alla on esimerkki, joka sopii hyvin Orange-ulkoasupohjaan.
.cc-window {
border: 1px solid rgba(0,0,0, 0.1);
box-shadow: 3px 3px 0px rgba(0,0,0, 0.3);
background-color: rgb(255,255,255);
font: 100%/1.4 'Karla', sans-serif !important;
}
.cc-message a {
color: rgb(80,80,80);
text-decoration: none !important;
}
.cc-message a:hover {
color: rgb(0,0,0);
text-decoration: underline !important;
}
.cc-btn {
background-color: rgb(242,242,242) !important;
border: 1px solid rgb(242,242,242) !important;
font: 12px/1 'Karla', sans-serif !important;
font-weight: bold !important;
color: rgb(39,39,39) !important;
cursor: pointer;
letter-spacing: 2px;
padding: 10px 10px !important;
min-width: 80px;
text-decoration: none;
text-transform: uppercase;
}
.cc-btn:hover {
background-color: rgba(255,150,55,1) !important;
border: 1px solid rgba(255,150,55,1) !important;
color: rgb(255,255,255) !important;
padding: 10px 10px !important;
}
Jatketaan tätä ohjetta laittamalla Facebook-pikseli Osano Cookie Consentin pyytämän suostumuksen taakse.
Tässä vaiheessa verkkokauppias on kuvaillut evästelaatikossa, millaisista evästeistä on kysymys ja pyytänyt suostumusta, jos se on pyydettävä. Verkkokauppiaalla on mahdollisuus saada selville asiakkaan tahtotila.
Lisää evästelaatikon JavaScript-koodiin vihreällä korostettu koodi. Huomioi, että vihreällä korostettu koodi alkaa edellisen rivin lopussa olevalla pilkulla.
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.cookieconsent.initialise({
"position": "bottom-left",
"type": "opt-in",
"content": {
"header": "<fi>Käytämme evästeitä!</fi><en>Cookies used on the website!</en>",
"message": "<fi>Käytämme evästeitä mainosten kohdentamisessa.</fi><en>This website uses cookies to personalise ads.</en>",
"dismiss": "<fi>Selvä!</fi><en>Got it!</en>",
"allow": "<fi>Salli evästeet</fi><en>Allow cookies</en>",
"deny": "<fi>Kiellä</fi><en>Decline</en>",
"link": "<fi>Lue lisää</fi><en>Learn more</en>",
"href": "<fi>https://www.example.com/tietosuoja.html</fi><en>https://www.example.com/privacy.html</en>",
"close": "❌",
"policy": "<fi>Evästekäytännöt</fi><en>Cookie Policy</en>",
"target": "_blank",
},
"cookie": {
"domain": "example.com",
"name": "cookieconsent_status1",
"expiryDays": "365",
},
onInitialise: function (status) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in') {
didConsent ? sessionStorage.setItem('occ_cookie_consent_given', '1') : sessionStorage.removeItem('occ_cookie_consent_given');
}
},
onStatusChange: function (status, chosenBefore) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in') {
didConsent ? sessionStorage.setItem('occ_cookie_consent_given', '1') : sessionStorage.removeItem('occ_cookie_consent_given');
}
},
onRevokeChoice: function () {
var type = this.options.type;
if (type == 'opt-in') {
sessionStorage.removeItem('occ_cookie_consent_given');
}
}
});
</script>
Olet jo aiemmin lisännyt Facebook-pikselin verkkokaupan hallintaliittymän asetukset / koodit ja ulkoasu -kohtaan.
Lisää Facebook-pikselin JavaScript-koodiin vihreällä korostettu rivi ja poista siitä punaisella korostettu rivi.
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
sessionStorage.getItem("occ_cookie_consent_given") ? fbq('consent', 'grant') : fbq('consent', 'revoke');
fbq('init', '012345678901234');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=012345678901234&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
Kun tarkastellaan Osano Cookie Consentin cookieconsent.min.js ↗ -tiedostoa (JavaScript-ohjelmaa), niin tiedoston sisältä paljastuu kolme verkko-osoitetta: //ipinfo.io, //api.ipinfodb.com/v3/ip-country/?key={api_key}&format=json&callback={callback} ja //js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js. Osano JavaScript API:n mukaan nämä paikannuspalvelut ovat oletusarvoisesti pois käytöstä. Hyvä, että tietoja ei vuoda. :)
Näillä ohjeilla ja koodiesimerkeillä ei ole minkäänlaista toimivuustakuuta. Emme vastaa välittömistä, välillisistä, satunnaisista tai epäsuorista vahingoista, menetyksistä, korvauksista, tai kolmannen osapuolen esittämistä vaatimuksista, jotka johtuvat näiden ohjeiden tai koodiesimerkkien noudattamisesta.
Asenna ohjelmisto tai tilaa meiltä maksuton asennustyö. Maksuton asiakaspalvelumme ja tekninen tukemme neuvoo tarvittaessa kummassakin tapauksessa.
Kirjaudu selaimella verkkokaupan hallintaliittymään ja perusta verkkokauppa. Tarjoamme maksuttomat Maxi-ominaisuudet verkkokaupan perustamisen ajaksi.
Tilaa lisenssi vasta, kun olet perustanut verkkokaupan, eli verkkokauppa on ns. laitettu tulille. Voit myös olla tilaamatta lisenssiä ja luopua hankkeesta.
