Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Sisällysluettelo

Table of Contents

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 suostumusta 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.

...

Code Block
[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.

Info

Huom.! Mikäli näkymässä käytetään ulkopuolisia liitännäisiä (esim. video- ja someupokkeet, chat-palvelut), jotka käyttävät evästeitä, pitää myös nämä evästeet kertoa käyttäjälle. Pitää myös huolehtia, että käyttäjän on tarvittaessa pystyttävä kieltäytymään näiden liitännäisten ja niihin liittyvien evästeiden käytöstä, mikäli liitännäisiin liittyviä evästeitä ei katsota välttämättömiksi evästeiksi.

Image RemovedImage Added

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

Code Block
[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. 

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

Image Added

Evästekategorioiden määrittäminen

...

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

Uuden suostumuksen pyytäminen

...

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

Code Block
languagephp
<?=$this->iframe()->youtube('5q70TokaSrw', ['video'], '512px560px', '384px315px')?>

Ilman koon määritystä:

...

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.

Code Block
languagephp
<?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:

Code Block
languagephp
<?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):

Code Block
languagephp
<?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):

Code Block
languagephp
<?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):

Code Block
languagephp
<?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:

Code Block
languagephp
<?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)

...