Default-komennon inline-toteutus

Tässä ohjeessa kerrotaan, miten toteutat oman inline-skriptin GCM:n default-komennolle.

5 min lukuaika

Omien inline-skriptien avulla voit räätälöidä GCM:n default-komennon sopimaan paremmin työnkulkuusi ja erityistarpeisiisi. Tässä ohjeessa opit vaiheet, joilla luot ja toteutat oman inline-skriptisi, sekä tärkeimmät asiat, jotka kannattaa huomioida sujuvan käyttöönoton varmistamiseksi.

1

Asenna oma default-komento

Käytä tätä tapaa, kun ylläpidät omaa inline-toteutustasi Google Consent Modesta ja sinun on asetettava oletussuostumustila suoraan sivulle. Googlen dokumentaation mukaan oletussuostumuksen komento tulee lisätä jokaiselle sivulle ja päivittää, kun kävijä käyttää suostumusbanneriasi.

CookiePal toteuttaa tämän komennon jo oletuksena, kun käytät sen tavallista Google Consent Mode -määritystä. Manuaalinen asennus on yleensä tarpeen vain omissa toteutuksissa, esimerkiksi kun hallinnoit omaa inline-gtag-määritystäsi, lataat tageja CookiePalin tai Google Tag Managerin ulkopuolella tai tarvitset oletussuostumuksen komennon suoritettavaksi omassa skriptijärjestyksessä ennen muiden tagien suorittamista.

Asenna oma skripti jokaisen sivun head-osioon ennen Google-tagin tai Google Tag Managerin käynnistyskoodia ja ennen myöhempiä gtag-komentoja, jotka voivat lähettää mittausdataa, kuten gtag('js', ...), gtag('config', ...) tai gtag('event', ...).

Järjestyksellä on merkitystä. Googlen vianmääritysohjeiden mukaan default-komennon lataaminen liian myöhään voi aiheuttaa Tag Assistantin virheen "A tag read consent state before a default was set".

Jos bannerisi tai CMP päivittää suostumuksen asynkronisesti, wait_for_update-arvo antaa sille lyhyen ajan lähettää vastaava suostumuspäivitys ennen kuin mittausdataa lähetetään.

2

Esimerkki omasta skriptistä

Esimerkki omasta inline-skriptistä:

1<script>
2window.dataLayer = window.dataLayer || [];
3function gtag() {
4  dataLayer.push(arguments);
5}
6gtag('consent', 'default', {
7  'ad_personalization': 'denied',
8  'ad_storage': 'denied',
9  'ad_user_data': 'denied',
10  'analytics_storage': 'denied',
11  'functionality_storage': 'denied',
12  'personalization_storage': 'denied',
13  'security_storage': 'granted',
14  'wait_for_update': 500,
15});
16gtag('set', 'ads_data_redaction', true);
17gtag('set', 'url_passthrough', true);
18</script>

HUOMAA: Jos käytät WordPressiä, katso WordPress-osio. Jos käytät Shopifyta, katso Shopify-osio. Jos käytät Next.js:ää, katso Next.js-osio.

3

Esimerkki alueasetuksista

Google suosittelee rajaamaan kielletyt oletukset alueisiin, joissa todella näytät suostumusbanneria. Tämä auttaa säilyttämään mittauksen muualla ja välttää tilanteen, jossa kävijöillä on kielletyt oletukset mutta ei banneria suostumuksen päivittämiseen.

Voit tehdä tämän region-parametrilla. Googlen dokumentaation mukaan arvot ovat ISO 3166-2 -aluekoodeja, joten voit tarvittaessa käyttää maakoodeja, kuten GB, ja osa-aluekoodeja, kuten US-AK.

Esimerkki aluekohtaisesta komennosta:

1<script>
2window.dataLayer = window.dataLayer || [];
3
4function gtag() {
5  dataLayer.push(arguments);
6}
7// EU-specific settings
8gtag('consent', 'default', {
9  'ad_personalization': 'denied',
10  'ad_storage': 'denied',
11  'ad_user_data': 'denied',
12  'analytics_storage': 'denied',
13  'functionality_storage': 'denied',
14  'personalization_storage': 'denied',
15  'region': [
16    'AT', 'BE', 'BG', 'CH', 'CY', 'DE', 'DK', 'EE', 'ES', 'FI',
17    'FR', 'GB', 'GG', 'GR', 'HR', 'HU', 'IE', 'IM', 'IT', 'JE', 'LT', 'LU',
18    'LV', 'MT', 'NL', 'PL', 'PT', 'RO', 'SE', 'SI', 'SK',
19  ],
20  'wait_for_update': 500,
21});
22// Default settings
23gtag('consent', 'default', {
24    'ad_personalization': 'granted',
25    'ad_storage': 'granted',
26    'ad_user_data': 'granted',
27    'analytics_storage': 'granted',
28    'functionality_storage': 'granted',
29    'personalization_storage': 'granted',
30    'security_storage': 'granted',
31    'wait_for_update': 500,
32});
33gtag('set', 'ads_data_redaction', true);
34gtag('set', 'url_passthrough', true);
35</script>

HUOMAA: Jos käytät tällaista alueeseen rajattua komentoa, varmista, että bannerisi kohdistuu samoihin alueisiin, ja lisää käytäntösi edellyttämä alueeton varakomento luettelon ulkopuolisille kävijöille.

4

Mitä ads_data_redaction tekee

Kun ad_storage on denied, Googlen mukaan mainosevästeitä ei aseteta, mutta pyyntöjen URL-osoitteet voivat silti sisältää mainosnapsautustietoja. Asetus gtag('set', 'ads_data_redaction', true) peittää lisäksi mainosnapsautustunnisteet Google Adsin ja Floodlightin verkkopyynnöissä ja lähettää nämä pyynnöt evästeettömän verkkotunnuksen kautta.

Tällä asetuksella on vaikutusta vain, kun suostumustilaa käytetään ja ad_storage on kielletty. Jos ad_storage on sallittu, Googlen dokumentaation mukaan ads_data_redaction ei vaikuta mitenkään.

Katso Googlen virallisesta ads data redaction -dokumentaatiosta mainosdatan peittämisen tarkka toiminta.

5

Mitä url_passthrough tekee

Kun ad_storage tai analytics_storage on kielletty, url_passthrough antaa Googlen välittää mainosnapsautus-, asiakas- ja istuntotiedot saman verkkotunnuksen URL-parametrien kautta, jotta mittaus voi jatkua sivulta toiselle evästeisiin turvautumatta.

Google huomauttaa, että tämä toimii vain tietyissä tapauksissa, esimerkiksi kun suostumustila on toteutettu ja navigointi pysyy samassa verkkotunnuksessa. Koska se voi lisätä URL-osoitteisiin parametreja, kuten gclid, dclid, gclsrc, _gl tai wbraid, varmista, että uudelleenohjauksesi säilyttävät ne ja että sivustosi voi tarvittaessa turvallisesti ohittaa ne.

Katso Googlen virallisesta URL passthrough -dokumentaatiosta URL passthroughin käyttöönoton vaatimukset ja rajoitukset.

6

Asenna se WordPressiin WPCoden avulla

Jos sivustosi toimii WordPressillä, voit lisätä default-komennon muokkaamatta teematiedostoja käyttämällä WPCode-lisäosaa PHP-koodinpätkän lisäämiseen.

Siirry WordPressin hallinta-alueella kohtaan Plugins > Add New, hae WPCode ja asenna ja aktivoi lisäosa.

Avaa Code Snippets ja luo uusi koodinpätkä. Valitse koodityypiksi PHP Snippet, liitä seuraava koodi ja tallenna se uutena koodinpätkänä.

1add_action('wp_head', function () {
2    ?>
3    <script>
4        window.dataLayer = window.dataLayer || [];
5        function gtag(){ dataLayer.push(arguments); }
6
7        gtag('consent', 'default', {
8            "ad_personalization": "denied",
9            "ad_storage": "denied",
10            "ad_user_data": "denied",
11            "analytics_storage": "denied",
12            "functionality_storage": "denied",
13            "security_storage": "granted",
14            "personalization_storage": "denied",
15            "wait_for_update": 500
16        });
17
18        gtag("set", "ads_data_redaction", true);
19        gtag("set", "url_passthrough", true);
20    </script>
21    <?php
22}, 0);

Aseta koodinpätkän asetuksissa Priority-arvoksi 0, jotta oletussuostumuksen komento suoritetaan mahdollisimman aikaisin sivun head-osiossa.

Varmista, että koodinpätkä on merkitty tilaan Active, ja tallenna se napsauttamalla Update.

Tallennuksen jälkeen varmista, että koodinpätkä näkyy WPCode-luettelossa, Code Type on PHP, Priority on 0 ja tilan kytkin on päällä.

7

Asenna se Shopifyyn

Jos kauppasi toimii Shopifyssa, voit lisätä default-komennon suoraan teemasi koodiin käyttämällä samaa skriptiä, joka näytetään yllä olevassa Esimerkki omasta skriptistä -osiossa.

Siirry Shopifyn hallinnassa kohtaan Online Store > Themes. Avaa nykyisen teemasi valikko ja napsauta Edit code.

Avaa koodieditorissa Layout > theme.liquid. Etsi avaava <head>-tagi ja liitä aiemman esimerkin default-komento heti sen perään, ennen CookiePal-bannerin skriptiä, Google-tagia tai Google Tag Managerin käynnistyskoodia.

Julkaise muutos napsauttamalla oikeassa yläkulmassa Save.

8

Asenna se Next.js:ään

Jos sivustosi toimii Next.js:llä, lisää default-komento juuriasetteluusi, kuten app/layout.tsx, ennen CookiePal-bannerin skriptiä, Google-tagia tai Google Tag Managerin käynnistyskoodia.

Pidä skriptin sisältö merkkijonona (string) <script>-elementin sisällä. Älä liitä objektia suoraan JSX:nä, sillä muuten Next.js yrittää tulkita sen sen sijaan, että renderöisi sen inline-skriptin sisältönä.

Käytä samaa default-komentoa, joka näytetään kohdassa Esimerkki omasta skriptistä, mutta muokkaa sitä niin, että JavaScript-runko pysyy merkkijonon sisällä, esimerkiksi näin:

1<script>
2  {`window.dataLayer = window.dataLayer || [];
3  function gtag() {
4    dataLayer.push(arguments);
5  }
6  gtag('consent', 'default', {
7    'ad_personalization': 'denied',
8    'ad_storage': 'denied',
9    'ad_user_data': 'denied',
10    'analytics_storage': 'denied',
11    'functionality_storage': 'denied',
12    'personalization_storage': 'denied',
13    'security_storage': 'granted',
14    'wait_for_update': 500,
15  });
16  gtag('set', 'ads_data_redaction', true);
17  gtag('set', 'url_passthrough', true);`}
18</script>

Tallenna muutoksesi ja julkaise Next.js-sivustosi päivitetty versio.

9

Tärkeä huomio järjestyksestä

Oman default-komennon on oltava suoritettuna ennen myöhempiä gtag-komentoja ja ennen tapahtumia, jotka voivat käynnistyä sivun latautuessa. Google suosittelee myös tallentamaan suostumuspäivityksen samalla sivulla, jolla kävijä käyttää banneria, ennen siirtymistä toiselle sivulle.

Oliko tästä ohjeesta apua?Kiitos palautteesta.
Etkö vieläkään pääse eteenpäin?Ota yhteyttä, niin autamme saamaan bannerisi käyttöön.Ota yhteyttä