Osano Cookie Consentin lisääminen

KehittäjilleKoodausohjeet › Osano Cookie Consentin lisääminen

Taustaa

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.

Tarvittavat ohjelmistot

Tässä työssä tarvitaan

  • verkkoselain (esim. Chrome)

Toteutusohjeet

  • Siirry osoitteeseen https://cookieconsent.osano.com ↗.
  • Klikkaa Download Open Source / Start coding.
  • Muuta Configure-kohdasta vain seuraavat kaksi asetusta.
    - Valitse Position-kohdasta "Floating left".
    - Jos suostumusta ei vaadita, niin valitse Compliance type -kohdasta "Just tell users that we use cookies".
    - Jos suostumus vaaditaan, niin valitse Compliance type -kohdasta "Ask users to opt into cookies (Advanced)".
  • Kopioi evästelaatikon HTML-koodi tietokoneesi leikepäydälle klikkaamalla Copy HTML -painiketta.
  • Siirry kohtaan: HTML-koodin lisääminen.
  • Kopioi evästelaatikon JavaScript-koodi tietokoneesi leikepäydälle klikkaamalla Copy code -painiketta.
  • Siirry kohtaan: JavaScript-koodin lisääminen.

HTML-koodin lisääminen

  • Kirjaudu verkkokaupan hallintaliittymään (demo).
  • Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
  • Klikkaa Lisää uusi -painiketta.
  • Valitse tyypiksi "HTML5".
  • Lisää Syötä nimeksi "Evästelaatikko" tai mitä tahansa.
  • Valitse Sijainti-valikosta "Verkkokaupassa </head> ennen".
  • Liitä HTML-koodi tietokoneesi leikepöydältä Koodi-kohtaan.
  • Klikkaa Tallenna-painiketta.

JavaScript-koodin lisääminen

  • Kirjaudu verkkokaupan hallintaliittymään (demo).
  • Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
  • Klikkaa Lisää uusi -painiketta.
  • Valitse tyypiksi "HTML5/JavaScript".
  • Lisää Syötä nimeksi "Evästelaatikko" tai mitä tahansa.
  • Valitse Sijainti-valikosta "Verkkokaupassa </body> ennen".
  • Liitä JavaScript-koodi tietokoneesi leikepöydältä Koodi-kohtaan.
  • Klikkaa Tallenna-painiketta.

Oletusasetusten mukauttaminen

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": "&#x274c;",
		"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.

Ulkoasu

Evästelaatikon ulkoasuasetukset (palette) kannattaa poistaa, kuten yllä olevissa esimerkeissä 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;
}

Facebook-pikseli (esimerkki)

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": "&#x274c;",
		"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 -->

Hyvä tietää

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. :)

Katso myös

Vastuunrajoitus

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.

Näin rakennat yrityksellesi verkkokaupan

1. Tilaa webhotelli

Tilaa esimerkiksi Cloudcity Plus ↗. Vaihtoehtoisesti voit tilata netistä minkä tahansa EU:n alueella toimivan webhotellipalvelun, joka on yhteensopiva ohjelmiston kanssa.

2. Tilaa asennus

Tilaa maksuton asennustyö. Vaihtoehtoisesti voit ladata ja asentaa ohjelmiston itse. Maksuton tekninen tukemme neuvoo tarvittaessa kummassakin tapauksessa.

3. Perusta verkkokauppa

Kirjaudu selaimella verkkokaupan hallintaliittymään ja perusta verkkokauppa. Tarjoamme maksuttoman Maxi-lisenssin verkkokaupan perustamisen ajaksi.

4. Tilaa lisenssi

Tilaa Mini- tai Maxi-lisenssi vasta, kun olet perustanut verkkokaupan. Vaihtoehtoisesti voit olla perustamatta verkkokauppaa tai käyttää ohjelmistoa maksuttomassa lepotilassa.

Scroll to Top