Evästebanneri- ja evästeasetukset

Sisällysluettelo

Johdanto

Evästebanneri tulee näkyviin, kun käyttäjä vierailee Finnassa ensimmäistä kertaa, tai kun käyttäjä on tyhjentänyt selaimessa olevat evästeet. Lisäksi banneri näytetään uudelleen, jos evästekategorioita on lisätty tai poistettu, tai hyväksynnän revisiota on nostettu asetuksissa uusien asetusten myötä.

Evästebannerin avulla käyttäjä voi hallita suostumustaan evästeiden käyttöön. Käyttäjä voi antaa suostumuksen kaikkien evästeiden käyttöön, välttämättömien evästeiden käyttöön tai tietyn evästekategorian käyttöön. Evästekategoriaan liittyvä suostumus annetaan evästebannerista avautuvassa evästeasetukset-ponnahdusikkunassa.

Evästekategorioita on mahdollista lisätä ja muokata näkymäkohtaisesti. Oletuksena Finnassa on käytössä välttämättömät- ja tilastointievästeet. Välttämättömiä evästeitä käyttäjä ei voi poistaa käytöstä, sillä ilman niitä Finna ei toimi. Tilastointievästeistä käyttäjä voi kieltäytyä, jolloin käyttäjän toimintaa sivuilla ei tallenneta Matomoon (Matomo on Finnan käyttämä käyttäjäseurantaohjelmisto).

Käyttäjän antama suostumus evästeisiin näytetään tietosuojasivulla (Content/privacy).

Evästebannerin käyttöönotto

Evästebannerin käyttöönotto tapahtuu lisäämällä local/config/vufind/config.ini-asetustiedostoon seuraava asetus:

[Cookies]
consent = true

Vanha suostumusilmoitus poistetaan automaattisesti käytöstä, kun uusi banneri otetaan käyttöön. Jos näin ei jostain syystä tapahdu, voi sen kytkeä pois tällä asetuksella (local/config/vufind/config.ini):

[FinnaCookieConsent]
enabled = false

Kielikäännökset

Evästebannerin ja asetusdialogin käännöstekstit löytyvät käännöstyypistä CookieConsent. Esim. bannerin normaalin tekstin käännöskoodi on popup_description_html.

Evästeasetukset

Finnan käyttöliittymässä käyttäjä pääsee evästeasetuksiin evästebannerin kautta, näkymän footerissa olevan "Evästeasetukset"-linkin kautta tai tietosuojasivun kautta (Content/privacy). Evästeasetuksissa käyttäjä voi antaa suostumuksen eri evästekategorioiden näyttämiseen. Evästeasetuksissa käyttäjälle näytetään myös sivustolla käytössä olevat evästeet.

Näkymässä käytössä olevat evästekategoriat määritellään local/config/vufind/config.ini-asetustiedostoon. Oletuksena käytössä on välttämättömät-(essential) ja tilastointievästeet (matomo).

[Cookies]
consent = true
consentCategories = "essential,matomo"

Huom.! Mikäli näkymässä on yliajettu footer.phtml, pitää "Evästeasetukset"-linkki lisätä manuaalisesti custom/templates/footer.phtml-tiedostoon. 

<?php if ($this->cookieConsent()->isEnabled()): ?>
  <li><a href="#" data-cc="show-preferencesModal" aria-haspopup="dialog"><?=$this->transEsc('Cookie Settings')?></a></li>
<?php endif; ?>

Evästekategorioiden määrittäminen

Näkymäkohtaiset evästekategoriat ja niihin liittyvät evästekategoriat määritellään local/config/vufind/CookieConsent.yaml -tiedostoon. Pohjaksi kannattaa kopioida CookieConsent.yaml.sample -tiedosto, joka sisältää esimerkkimäärityksiä ulkoisille liitännäisille. Eli kopioi CookieConsent.yaml.sample nimelle CookieConsent.yaml, ja tee muutokset tiedostoon CookieConsent.yaml.

Evästekategoriassa määritellään kategorian tunnus (esim. video), otsikko (Title), kuvaus (Description), evästekategorian asettaminen oletuksena päällä (DefaultEnabled) ja evästekategorian määrittäminen välttämättömäksi (Essential). Evästekategoriassa käytetyt evästeet listataan Cookies-määrityksen alle. Yksittäisestä evästeestä pitää määrittää nimi (Name), toimialue (Domain), kuvaus (Description) sekä evästeen erääntyminen (Expiration). Lisäksi evästekategoriaan pitää määrittää evästeiden tyhjentäminen (AutoClearCookies). AutoClearCookies-asetuksen avulla Finna poistaa evästekategoriaan määritelty evästeet käyttäjältä, jos käyttäjä on kieltänyt evästekategorian evästeasetuksissa. Esimerkkejä, oletuskategoriat ja lisätietoa löytyy local/config/finna/CookieConsent.yaml-tiedostosta.

Evästekategorioiden ja evästeiden -kuvaukset sekä otsikot on käännettävissä käännösavainten avulla (käännöstyyppi: CookieConsent).

Uuden suostumuksen pyytäminen

Jos evästekategorioihin lisätään uusia evästeitä, tulee käyttäjältä pyytää uusi suostumus. Tämä onnistuu kasvattamalla evästeiden "revisiota" (oletusrevisio on 0) local/config/vufind/config.ini-asetustiedostossa:

[Cookies]
consent = true
consentCategories = "essential,matomo"
consentRevision = 1

Jos muutoksia tulee lisää, vaihdetaan consentRevision-asetukseen 2 jne.

Suostumusdialogi ulkopuolisiin sisältöihin, jotka käyttävät evästeitä

Finnassa on valmiita upokkeita, joiden avulla käyttäjälle kerrotaan, että sisällön näyttämiseen vaaditaan tietyn evästekategorian suostumus. Upokkeita voi käyttää mm. Finnan etu- ja sisältösivuilla. Nykyinen liitännäisen upotuskoodi pitää korvata vastaavalla Finnan upotuskoodilla.

YouTube

Upotuskoodissa määritellään id, tarvittava evästekategoria ja haluttaessa videoelementin leveys ja korkeus css-yksiköissä (esim. px).

<?=$this->iframe()->youtube('5q70TokaSrw', ['video'], '560px', '315px')?>

Ilman koon määritystä:

<?=$this->iframe()->youtube('5q70TokaSrw', ['video'])?>

Vimeo

Upotuskoodissa määritellään id, tarvittava evästekategoria ja haluttaessa videoelementin leveys ja korkeus css-yksiköissä (esim. px).

<?=$this->iframe()->vimeo('255076675', ['video'], '512px', '384px')?>

Ilman koon määritystä:

<?=$this->iframe()->vimeo('255076675', ['vimeo'])?>

Twitter

Upotuskoodissa määritellään seurattava tunnus, tarvittava evästekategoria ja haluttaessa elementin leveys ja korkeus pikseleinä (korkeuden tulee olla vähintään 220):

<?=$this->iframe()->twitterTimeline('eAineistot', ['social'], '480', '320')?>

Ilman koon määritystä:

<?=$this->iframe()->twitterTimeline('eAineistot', ['social'])?>

Muut liitännäiset joille ei ole valmista upoketta

Linkkilaatikko, jos käyttäjä ei ole hyväksynyt evästekategoriaa

Seuraavan esimerkin mukaisesti voi näyttää liitännäisen ehdollisesti sen perusteella, onko käyttäjä hyväksynyt kategorian.

<?php $cookieConsent = $this->plugin('cookieConsent'); ?>
<?php // Jos cookie consent ei ole käytössä, tai käyttäjä on hyväksynyt video-kategorian, näytetään "supersuper-palvelun" video: ?>
<?php if (!$cookieConsent->isEnabled() || $cookieConsent->isCategoryAccepted('video')): ?>
  <?php // Tähän kohtaan supersuper-palvelun edellyttämä upotuskoodi: ?>
  <iframe width="560" height="315" src="https://supersuper-palvelu/embed/5q70TokaSrw" title="Super Super video player" frameborder="0" allow="fullscreen picture-in-picture"></iframe>
<?php else: ?>    
  <?php // Käyttäjä ei ole hyväksynyt video-kategoriaa, näytetään linkkilaatikko upokkeen sijaan: ?>
  <?=$this->iframe()->renderLinkBox('https://supersuper-palvelu/video/5q70TokaSrw', ['video'])?>
<?php endif; ?>

Viesti ilman linkkilaatikkoa, jos käyttäjä ei ole hyväksynyt evästekategoriaa

Linkkilaatikon sijaan voi myös näyttää vaikka vain viestin siitä, ettei tarvittavia evästeitä ole hyväksytty:

<?php $cookieConsent = $this->plugin('cookieConsent'); ?>
<?php // Jos cookie consent ei ole käytössä, tai käyttäjä on hyväksynyt video-kategorian, näytetään "supersuper-palvelun" video: ?>
<?php if (!$cookieConsent->isEnabled() || $cookieConsent->isCategoryAccepted('video')): ?>
  <?php // Tähän kohtaan supersuper-palvelun edellyttämä upotuskoodi: ?>
  <iframe width="560" height="315" src="https://supersuper-palvelu/embed/5q70TokaSrw" title="Super Super video player" frameborder="0" allow="fullscreen picture-in-picture"></iframe>
<?php else: ?>    
  <?php // Käyttäjä ei ole hyväksynyt video-kategoriaa, näytetään viesti: ?>
  <p>
    <?=$this->transEsc('Video cannot be displayed due to missing cookie consent.')?>
<?php endif; ?>

Vain toiminto, jos käyttäjä on hyväksynyt evästekategorian

Voi myös tehdä niin, että mitään linkkilaatikkoa tai viestiä ei näytetä, vaan toimintoa ei vain suoriteta, ellei tarvittavaa kategoriaa ole hyväksytty (vaikka chat-upoke). Vaatii evästekategorian chat (lisättävä CookieConsent.yaml-tiedostoon):

<?php $cookieConsent = $this->plugin('cookieConsent'); ?>
<?php // Jos cookie consent ei ole käytössä, tai käyttäjä on hyväksynyt chat-kategorian, alustetaan chat-upoke: ?>
<?php if (!$cookieConsent->isEnabled() || $cookieConsent->isCategoryAccepted('chat')): ?>
  <!-- giosg tag -->
  <script nonce="<?=$this->cspNonce()?>">
  (function(w, t, f) {
    var s='script',o='_giosg',h='https://service.giosg.com',e,n;e=t.createElement(s);e.async=1;e.src=h+'/live/';
    w[o]=w[o]||function(){(w[o]._e=w[o]._e||[]).push(arguments)};w[o]._c=f;w[o]._h=h;n=t.getElementsByTagName(s)[0];n.parentNode.insertBefore(e,n);
  })(window,document,1);
  </script>
  !-- giosg tag -->
<?php endif; ?>

Slide-out, joka korvaa chat-toiminnon, jos tarvittavaa kategoriaa ei ole hyväksytty

Oikeassa reunassa majaileva nappula, joka muistuttaa libanswers:n slide-out -nappulaa, vaatii evästekategorian chat (lisättävä CookieConsent.yaml-tiedostoon):

<?php $cookieConsent = $this->plugin('cookieConsent'); ?>
<?php // Jos cookie consent ei ole käytössä, tai käyttäjä on hyväksynyt chat-kategorian, alustetaan chat-upoke: ?>
<?php if (!$cookieConsent->isEnabled() || $cookieConsent->isCategoryAccepted('chat')): ?>
  <?php // Chat-upokkeen upotuskoodi: ?>
  <script src="https://libanswers.jotain.fi/load_chat.php?hash=TUNNISTE" nonce="<?=$this->cspNonce()?>"></script>
  <div id="libchat_TUNNISTE"></div>
<?php else: ?>
  <?php // Muuten näytetään oma slide-out, jossa on Evästeasetukset-nappula: ?>
  <div style="position: fixed; top: 150px; right: 0; z-index: 1000; background: #f9f9f9;">
    <div id="chat-placeholder" style="width: 300px; height: 300px; padding: 5px; margin-right: -300px; float: right; border: 1px solid #ccc;">
      <a href="#" class="btn" id="chat-opener" style="float: left; margin: -5px -50px 0px 0px; border-radius: 0; transform: rotate(90deg); transform-origin: top left; border-color: rgb(255, 255, 255); color: rgb(255, 255, 255); background-color: rgb(102, 45, 145); box-shadow: rgb(204, 204, 204) 0px 0px 5px; border-width: 0px 4px 4px;">
        Kysy apua / Ask for help
      </a>
      <div style="float: left; margin: 1em;">
        <p style="font-weight: bold"><?=$this->transEsc('embedded_content_heading')?></p>
        <a class="btn btn-default" href="#" data-cc="show-preferencesModal" aria-haspopup="dialog"><?=$this->transEsc('Cookie Settings')?></a>
      </div>
    </div>
  </div>
  <script nonce="<?=$this->cspNonce()?>">
    $('#chat-opener').on('click', function() {
      var panel = $('#chat-placeholder');
      if (panel.hasClass("visible")) {
        panel.removeClass('visible').animate({'margin-right': '-300px'});
      } else {
        panel.addClass('visible').animate({'margin-right': '0px'});
      }
      return false;
    });
  </script>
<?php endif; ?>

Todellinen esimerkki: SoundCloud

SoundCloudin kappaleen embed-koodi kopioituna suoraan, vaatii evästekategorian audio (lisättävä CookieConsent.yaml-tiedostoon):

<?php $cookieConsent = $this->plugin('cookieConsent'); ?>
<?php if (!$cookieConsent->isEnabled() || $cookieConsent->isCategoryAccepted('audio')): ?>
  <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/157682325&color=%23ff0046&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/cookiesvision" title="Cookies" target="_blank" style="color: #cccccc; text-decoration: none;">Cookies</a> · <a href="https://soundcloud.com/cookiesvision/music-for-touching" title="Music For Touching" target="_blank" style="color: #cccccc; text-decoration: none;">Music For Touching</a></div>
<?php else: ?>    
  <?=$this->iframe()->renderLinkBox('https://soundcloud.com/cookiesvision/music-for-touching', ['audio'])?>
<?php endif; ?>

Todellinen esimerkki: Youtube-lista

Youtube-listan embed-koodi kopioituna suoraan, vaatii evästekategorian video:

<?php $cookieConsent = $this->plugin('cookieConsent'); ?>
<?php if (!$cookieConsent->isEnabled() || $cookieConsent->isCategoryAccepted('video')): ?>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLfKV17HE88YvkNwMjr3Nw2phAS27eNsCI" frameborder="0" allow="fullscreen picture-in-picture"></iframe>
<?php else: ?>   
  <?=$this->iframe()->renderLinkBox('https://youtu.be/04HX3Knc-qw?list=PLfKV17HE88YvkNwMjr3Nw2phAS27eNsCI', ['video'])?>
<?php endif; ?>

Esimerkki: videokategorian lisäys evästeasetuksiin ja videon upottaminen sisältösivulle (YouTube-video)

Kopioi CookieConsent.yaml.sample nimelle CookieConsent.yaml. Tarkista että video-kategoria on määritelty.

Lisää config.ini:iin video-kategoria:

[Cookies]
consent = true
consentCategories = "essential,matomo,video"

Voit upottaa videon phtml-tiedostoon seuraavalla koodilla. Upotuskoodissa määritellään videon id, käytettävä evästekategoria sekä leveys ja korkeus pikseleinä.

<?=$this->iframe()->youtube('5q70TokaSrw', ['video'], '512px', '384px')?>

Videon katsomiseen sivulla vaaditaan, että käyttäjä on hyväksynyt video-evästeet taikka kaikki sivun evästeet. Jos käyttäjä ei ole hyväksynyt tarvittavia evästeitä, näytetään suostumusikkuna, josta on myös mahdollista siirtyä katsomaan video YouTube-palvelussa.

Lisätietoa aiheesta

https://vufind.org/wiki/configuration:cookie_consent (VuFindin ohje)

https://www.traficom.fi/sites/default/files/media/file/Ev%C3%A4steohjeistus_palveluntarjoajille.pdf (Traficomin evästeohjeistus palveluntarjoajille)