YouTube, Google Maps ja muut upotukset: näin lataat ne suostumuksen jälkeen

Upotetut YouTube-videot, Google Maps -kartat ja somejulkaisut lataavat kolmannen osapuolen koodia heti, kun sivu renderöidään, ja tämä koodi voi asettaa evästeitä ja lähettää kävijän tietoja palveluntarjoajalle. Jotta voit upottaa niitä lainmukaisesti EU:ssa ja Isossa-Britanniassa, näytä ensin paikallinen paikkamerkki ja lataa varsinainen upotus vasta, kun kävijä antaa suostumuksensa tai klikkaa ladatakseen sen. YouTuben tehostettu tietosuojatila auttaa, mutta se ei korvaa suostumusta.

Miksi upotukset edellyttävät suostumusta?

Upotus on ikkuna jonkun toisen verkkosivustolle. Kun selain renderöi iframen youtube.comista tai google.comista, se pyytää palveluntarjoajan sivun, skriptit ja kuvat, lähettää kävijän IP-osoitteen ja selaimen tiedot ja antaa palveluntarjoajan lukea ja kirjoittaa omia evästeitään ja tallennustilaansa. Mikään tästä ei odota banneriasi.

Siksi upotuksiin sovelletaan samoja suostumussääntöjä kuin seurantaskripteihin. Tietojen tallentaminen kävijän laitteelle tai niiden lukeminen sieltä muihin kuin ehdottoman välttämättömiin tarkoituksiin edellyttää suostumusta tekniikasta riippumatta; säännön ulottuvuudesta kerrotaan artikkelissa kattaako evästesuostumus localStoragen, pikselit ja sormenjälkitunnistuksen?

Olet myös vastuussa päätöksestä upottaa sisältöä. Fashion ID -asiassa (C-40/17) Euroopan unionin tuomioistuin katsoi, että verkkosivusto, joka oli upottanut Facebookin Tykkää-painikkeen, oli Facebookin kanssa yhteisrekisterinpitäjä kävijän tietojen keräämisen ja Facebookille välittämisen osalta. Sama logiikka koskee muitakin upotuksia, jotka lähettävät tietoja palveluntarjoajalleen.

Riittääkö youtube-nocookie.com?

Ei riitä. YouTuben tehostettu tietosuojatila, joka otetaan käyttöön vaihtamalla upotuksen verkkotunnukseksi www.youtube-nocookie.com, tarkoittaa, ettei upotetun videon katselukertoja käytetä katsojan YouTube-kokemuksen tai hänelle muualla näytettävien mainosten personointiin. Se on todellinen parannus.

Se ei kuitenkaan estä soitinta latautumasta Googlen palvelimilta tai käyttämästä selaimen tallennustilaa, ja kävijän tiedot päätyvät silti Googlelle, kun iframe latautuu. Käytä tehostettua tietosuojatilaa URL-osoitteena, jonka lataat suostumuksen jälkeen, älä syynä ladata soitin ilman sitä.

Mitä yleisimmät upotukset lataavat?

Jokainen merkittävä upotusten tarjoaja lataa omaa koodiaan ja voi asettaa omia tunnisteitaan. Taulukossa on tavallisimmat vaihtoehdot, jotka eivät edellytä suostumusta.

Upotus	Mitä latautuu ennen vuorovaikutusta	Vaihtoehto ilman suostumusta
YouTube-video	Soitinsivu, skriptit, pikkukuvat, Googlen evästeet tai tallennustila	Itse isännöity pikkukuva ja klikkaa ladataksesi -painike
Vimeo-video	Soitinsivu, skriptit, analytiikka	Itse isännöity pikkukuva tai Vimeon do-not-track-soitinvalinta, kun olet tarkistanut, mitä se kattaa
Google Maps	Karttaruudut, skriptit, Googlen evästeet	Staattinen karttakuva ja linkki reittiohjeiden avaamiseen
Somejulkaisut (X, Instagram, Facebook)	Palveluntarjoajan skripti, joka muotoilee julkaisun uudelleen	Palveluntarjoajan antama staattinen HTML-varaversio
Chat- ja ajanvarauswidgetit	Palveluntarjoajan skripti, usein istuntoseurannalla	Painike, joka avaa widgetin pyynnöstä

Miten rakennan klikkaa ladataksesi -paikkamerkin?

Renderöi paikkamerkki, joka näyttää upotukselta, kertoo, mitä tapahtuu, ja sisältää oikean painikkeen. Säilytä upotuksen URL data-määritteessä, jotta selain ei pyydä sitä.

<div class="embed" data-consent="marketing"
     data-embed-src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1"
     data-embed-title="Tuote-esittelyvideo">
  <img src="/images/demo-thumbnail.jpg" alt="" width="560" height="315">
  <p>Tätä videota isännöi YouTube. Sen toistaminen lataa sisältöä Googlelta,
     joka voi asettaa evästeitä. <a href="/cookie-policy">Lue lisää</a></p>
  <button type="button" class="embed-load">Toista video</button>
  <label><input type="checkbox" class="embed-remember"> Salli YouTube-videot aina</label>
</div>

Vaihda sitten paikkamerkki iframeen klikkauksesta tai kaikki kategorian paikkamerkit kerralla, kun kävijä antaa suostumuksensa bannerisi kautta:

function loadEmbed(placeholder) {
  const frame = document.createElement('iframe');
  frame.src = placeholder.dataset.embedSrc;
  frame.title = placeholder.dataset.embedTitle;
  frame.width = '560';
  frame.height = '315';
  frame.allow = 'autoplay; encrypted-media; picture-in-picture';
  frame.allowFullscreen = true;
  placeholder.replaceWith(frame);
  frame.focus(); // pidä näppäimistön käyttäjät siellä, missä he olivat
}

document.addEventListener('click', (event) => {
  const button = event.target.closest('.embed-load');
  if (!button) return;
  const placeholder = button.closest('.embed');
  if (placeholder.querySelector('.embed-remember')?.checked) {
    grantConsent(placeholder.dataset.consent); // oma suostumuskerroksesi; lataa loput
  }
  loadEmbed(placeholder);
});

// Kutsu bannerisi käsittelijöistä, kun kategoria hyväksytään
function activateEmbeds(category) {
  document.querySelectorAll(`.embed[data-consent="${category}"]`).forEach(loadEmbed);
}

Muutama yksityiskohta ratkaisee, toimiiko paikkamerkki vai ärsyttääkö se ihmisiä:

• Isännöi esikatselukuva itse. YouTuben pikkukuvan suora linkittäminen lähettää pyynnön Googlelle ennen kuin mitään valintaa on tehty.
• Varaa tila. Anna paikkamerkille samat mitat kuin iframelle, jotta vaihto ei aiheuta asettelun siirtymää.
• Kerro, kuka palveluntarjoaja on. Täsmällinen ilmoitus (”Tätä videota isännöi YouTube”) tekee klikkauksesta tietoon perustuvan valinnan.
• Tallenna pysyvät valinnat. Jos kävijä rastittaa ”salli aina”, tallenna valinta suostumuskerroksesi kautta ja kirjaa se lokiin kuten minkä tahansa bannerivalinnan.

Skriptien pidättämisen yleisestä mallista kerrotaan artikkelissa kolmansien osapuolten skriptien estäminen suostumukseen asti.

Miten käsittelen somejulkaisut ja kartat?

Useimmissa someupotuksissa on jo valmiina staattinen varaversio. Esimerkiksi X:n upotettu julkaisu on julkaisun tekstin sisältävä blockquote, jonka palveluntarjoajan widget-skripti myöhemmin muuttaa näyttäväksi kortiksi. Pidä blockquote ja lataa widget-skripti vasta suostumuksen jälkeen:

<blockquote class="twitter-tweet">
  <p>Julkaisun teksti, kirjoittaja ja päivämäärä upotuskoodin mukaisesti.</p>
  <a href="https://x.com/example/status/1234567890">Näytä julkaisu</a>
</blockquote>

<!-- Passiivinen, kunnes markkinointikategoria hyväksytään -->
<script type="text/plain" data-consent="marketing"
        src="https://platform.twitter.com/widgets.js"></script>

Kartoissa staattinen kuva sijainnista ja ”Avaa Google Mapsissa” -linkki kattavat useimmat tarpeet lataamatta mitään Googlelta. Jos tarvitset vuorovaikutteisen kartan, käytä samaa klikkaa ladataksesi -paikkamerkkiä kuin videoissa.

Parantaako klikkaa ladataksesi -malli suorituskykyä?

Parantaa. Videosoittimet ja karttawidgetit ovat monilla sivuilla raskaimpia osia, usein satoja kilotavuja JavaScriptiä. Kun ne ladataan vain pyynnöstä, kustannus poistuu jokaiselta kävijältä, joka vierittää niiden ohi, mikä parantaa esimerkiksi Largest Contentful Paint- ja Interaction to Next Paint -mittareita. Suostumustyökalujen pitämisestä nopeina kerrotaan lisää artikkelissa evästebannerit ja Core Web Vitals.

Yhteenveto

Jokainen upotus on kolmannen osapuolen pyyntö ja yleensä myös kolmannen osapuolen tallennustilaa, joten käsittele sitä kuten mitä tahansa muuta seurantatyökalua: mitään ei ladata ennen suostumusta. Korvaa upotukset saavutettavilla, itse isännöidyillä paikkamerkeillä, lataa varsinainen sisältö, kun kävijä klikkaa tai antaa suostumuksensa, ja säilytä staattiset varaversiot somejulkaisuille ja kartoille. Cookieshin kaltaiset työkalut voivat pidätellä iframeja, kuten videoita ja karttoja, suostumukseen asti, ja Cookieshin skanneri listaa upotusten tarjoajat muiden kolmansien osapuolten pyyntöjesi rinnalla, joten näet, mitkä sivut tarvitsevat paikkamerkkejä.

Tämä artikkeli on yleistä tietoa eikä oikeudellista neuvontaa. Kun teet omaa tilannettasi koskevia päätöksiä, käänny pätevän tietosuoja-asiantuntijan puoleen.