Artikel ini ditujukan untuk developer yang mengelola solusi pengelolaan izin di situs yang menggunakan Google Tag Manager (GTM).
Halaman ini memperkenalkan jenis izin di Google Tag Manager dan menunjukkan cara mengintegrasikannya dengan solusi pengelolaan izin Anda.
Mengapa menggunakan template tag untuk izin?
Saat Anda menyediakan template tag, pengguna dapat mengintegrasikan solusi izin Anda tanpa kode, sehingga menghemat banyak waktu dan tenaga.
Pengguna dapat menetapkan status izin default menggunakan template mode izin dan mengomunikasikan pilihan izin pengunjung ke Google Pengelola Tag. Tindakan ini akan memastikan fungsi optimal tag Google dan tag pihak ketiga yang mendukung mode izin.
Sebagai pembuat template, Anda dapat menerapkan template mode izin untuk penggunaan internal atau memublikasikannya di Galeri Template Komunitas agar tersedia untuk publik. Penyedia Platform Pengelolaan Izin (CMP) yang menawarkan template mode izin dapat dicantumkan dalam dokumentasi mode izin kami dan ditampilkan template-nya di pemilih Galeri Template.
Status izin dan jenis izin
Tag Google dan pihak ketiga menyesuaikan perilaku penyimpanannya berdasarkan status izin: granted
atau denied
. Tag tersebut dapat memiliki pemeriksaan izin bawaan untuk salah satu jenis izin berikut:
Jenis Izin | Deskripsi |
---|---|
ad_storage |
Memungkinkan penyimpanan, seperti cookie, yang terkait dengan iklan. |
ad_user_data |
Menetapkan izin untuk mengirim data pengguna ke Google untuk tujuan iklan online. |
ad_personalization |
Menetapkan izin untuk iklan yang dipersonalisasi. |
analytics_storage |
Memungkinkan penyimpanan, seperti cookie, yang terkait dengan analisis (misalnya, durasi kunjungan). |
functionality_storage |
Memungkinkan penyimpanan yang mendukung fungsi situs atau aplikasi seperti setelan bahasa. |
personalization_storage |
Memungkinkan penyimpanan yang terkait dengan personalisasi seperti rekomendasi video. |
security_storage |
Memungkinkan penyimpanan yang terkait dengan keamanan seperti fungsi autentikasi, pencegahan penipuan, dan perlindungan lainnya bagi pengguna. |
Membuat template izin baru
Mode izin terus melacak pilihan izin pengunjung dan pemeriksaan izin tag akan memastikan perilaku tag disesuaikan. Saat membuat template izin baru, ikuti praktik terbaik berikut:
Gunakan API mode izin Tag Manager setDefaultConsentState dan updateConsentState, bukan
gtag consent
.Tetapkan status izin default segera setelah pengaktifan menggunakan pemicu Inisialisasi Izin - Semua Halaman.
Kemudian, CMP harus meminta pengunjung untuk sesegera mungkin memberikan atau menolak izin untuk semua jenis izin yang berlaku.
Saat pengunjung menunjukkan pilihan izinnya, CMP harus meneruskan status izin yang telah diperbarui tersebut.
1. Buat template baru
Pendekatan penerapan ini menggunakan satu kolom di template untuk menyimpan status izin default. Kode penerapan akan membaca kolom tersebut untuk menetapkan status izin default saat runtime. Untuk perintah pembaruan, kode Anda akan mencoba membaca cookie yang ditetapkan oleh solusi izin untuk menyimpan pilihan izin pengunjung toko. Anda juga akan menyiapkan callback untuk
updateConsentState
guna menangani kasus saat pengunjung belum membuat pilihan izin atau memutuskan untuk mengubah izin mereka.
Untuk membuat template izin:
- Login ke akun Google Tag Manager.
- Di navigasi sebelah kiri, pilih Template.
- Di panel Template Tag, klik Baru.
Untuk menetapkan status izin default:
- Pilih tab Kolom, lalu klik Tambahkan Kolom > Tabel parameter.
- Ganti namanya menjadi
defaultSettings
. - Luaskan kolom.
- Perbarui Nama tampilan menjadi
Default settings
. - Klik Tambahkan kolom, pilih Input teks, ubah namanya menjadi
region
lalu centang kotak Nilai kolom harus unik. - Luaskan kolom dan ubah nama tampilan menjadi
Region (leave blank to have consent apply to all regions)
. Pernyataan dalam tanda kurung adalah dokumentasi untuk pengguna template. Pelajari lebih lanjut cara menyiapkan setelan default izin untuk berbagai wilayah. - Klik Tambahkan kolom, pilih Input teks, ubah namanya menjadi
granted
. - Luaskan kolom dan ubah nama tampilan menjadi
Granted Consent Types (comma separated)
. - Klik Tambahkan kolom, pilih Input teks, ubah namanya menjadi
denied
. - Luaskan kolom dan ubah nama tampilan menjadi
Denied Consent Types (comma separated)
.
Opsional: Guna menambahkan dukungan untuk menyamarkan data iklan:
- Klik Tambahkan Kolom, pilih Kotak Centang, dan ubah nama kolom menjadi
ads_data_redaction
. - Perbarui Nama tampilan menjadi
Redact Ads Data
.
Pelajari lebih lanjut perilaku cookie dengan penyamaran data iklan.
Opsional: Guna menambahkan dukungan untuk meneruskan parameter URL:
- Klik Tambahkan Kolom, pilih Kotak Centang, dan ubah nama kolom menjadi
url_passthrough
. - Perbarui Nama tampilan menjadi
Pass through URL parameters
.
Pelajari lebih lanjut cara meneruskan parameter URL.
Untuk menambahkan kode penerapan:
- Buka tab Kode di editor template.
- Dalam contoh kode di bawah, edit kolom placeholder.
- Salin kodenya dan ganti kode boilerplate di editor template dengan kode tersebut.
- Klik Save untuk menyimpan template.
// The first two lines are optional, use if you want to enable logging
const log = require('logToConsole');
log('data =', data);
const setDefaultConsentState = require('setDefaultConsentState');
const updateConsentState = require('updateConsentState');
const getCookieValues = require('getCookieValues');
const callInWindow = require('callInWindow');
const gtagSet = require('gtagSet');
const COOKIE_NAME = 'Your_cookie_name';
/*
* Splits the input string using comma as a delimiter, returning an array of
* strings
*/
const splitInput = (input) => {
return input.split(',')
.map(entry => entry.trim())
.filter(entry => entry.length !== 0);
};
/*
* Processes a row of input from the default settings table, returning an object
* which can be passed as an argument to setDefaultConsentState
*/
const parseCommandData = (settings) => {
const regions = splitInput(settings['region']);
const granted = splitInput(settings['granted']);
const denied = splitInput(settings['denied']);
const commandData = {};
if (regions.length > 0) {
commandData.region = regions;
}
granted.forEach(entry => {
commandData[entry] = 'granted';
});
denied.forEach(entry => {
commandData[entry] = 'denied';
});
return commandData;
};
/*
* Called when consent changes. Assumes that consent object contains keys which
* directly correspond to Google consent types.
*/
const onUserConsent = (consent) => {
const consentModeStates = {
ad_storage: consent['adConsentGranted'] ? 'granted' : 'denied',
ad_user_data: consent['adUserDataConsentGranted'] ? 'granted' : 'denied',
ad_personalization: consent['adPersonalizationConsentGranted'] ? 'granted' : 'denied',
analytics_storage: consent['analyticsConsentGranted'] ? 'granted' : 'denied',
functionality_storage: consent['functionalityConsentGranted'] ? 'granted' : 'denied',
personalization_storage: consent['personalizationConsentGranted'] ? 'granted' : 'denied',
security_storage: consent['securityConsentGranted'] ? 'granted' : 'denied',
};
updateConsentState(consentModeStates);
};
/*
* Executes the default command, sets the developer ID, and sets up the consent
* update callback
*/
const main = (data) => {
/*
* Optional settings using gtagSet
*/
gtagSet('ads_data_redaction', data.ads_data_redaction);
gtagSet('url_passthrough', data.url_passthrough);
gtagSet('developer_id.your_developer_id', true);
// Set default consent state(s)
data.defaultSettings.forEach(settings => {
const defaultData = parseCommandData(settings);
// wait_for_update (ms) allows for time to receive visitor choices from the CMP
defaultData.wait_for_update = 500;
setDefaultConsentState(defaultData);
});
// Check if cookie is set and has values that correspond to Google consent
// types. If it does, run onUserConsent().
const settings = getCookieValues(COOKIE_NAME);
if (typeof settings !== 'undefined') {
onUserConsent(settings);
}
/**
* Add event listener to trigger update when consent changes
*
* References an external method on the window object which accepts a
* function as an argument. If you do not have such a method, you will need
* to create one before continuing. This method should add the function
* that is passed as an argument as a callback for an event emitted when
* the user updates their consent. The callback should be called with an
* object containing fields that correspond to the five built-in Google
* consent types.
*/
callInWindow('addConsentListenerExample', onUserConsent);
};
main(data);
data.gtmOnSuccess();
Selanjutnya, konfigurasi izin untuk mengakses status izin dan untuk mengakses cookie.
Guna menambahkan izin untuk mengelola status izin:
- Pilih tab Izin lalu klik Status izin akses.
- Klik Tambahkan jenis izin.
- Klik kotak dan pilih
ad_storage
dari menu drop-down. - Centang Tulis.
- Klik Tambahkan
- Ulangi langkah 2–5 untuk
ad_user_data
,ad_personalization
, dananalytics_storage
. Jika Anda memerlukan jenis izin tambahan, tambahkan jenis izin tersebut dengan cara yang sama. - Klik Simpan.
Guna menambahkan izin untuk mengakses cookie:
- Pilih tab Izin lalu klik Baca nilai cookie.
- Pada bagian Spesifik, masukkan nama setiap cookie yang harus dibaca kode Anda untuk menentukan pilihan izin pengguna, satu nama per baris.
- Klik Simpan.
2. Membuat pengujian unit
Lihat Pengujian untuk mendapatkan informasi tentang cara membuat pengujian untuk template Anda.
3. Mengintegrasikan template dengan solusi izin
Kode berikut menunjukkan satu contoh cara mengintegrasikan template ini dengan kode untuk solusi pengelolaan izin Anda dengan menambahkan sebuah pemroses:
// Array of callbacks to be executed when consent changes
const consentListeners = [];
/**
* Called from GTM template to set callback to be executed when user consent is provided.
* @param {function} Callback to execute on user consent
*/
window.addConsentListenerExample = (callback) => {
consentListeners.push(callback);
};
/**
* Called when user grants/denies consent.
* @param {Object} Object containing user consent settings.
*/
const onConsentChange = (consent) => {
consentListeners.forEach((callback) => {
callback(consent);
});
};
Memperbarui status izin
Setelah pengunjung situs menyatakan pilihan izinnya, biasanya melalui interaksi dengan banner izin, kode template akan memperbarui status izin sebagaimana mestinya menggunakan API updateConsentState.
Contoh berikut menunjukkan panggilan updateConsentState
untuk pengunjung yang
menyatakan bahwa mereka mengizinkan semua jenis penyimpanan. Sekali lagi, contoh ini menggunakan nilai hardcode untuk granted
, tetapi dalam praktiknya, nilai ini harus ditentukan saat runtime menggunakan izin pengunjung yang dikumpulkan oleh CMP.
const updateConsentState = require('updateConsentState');
updateConsentState({
'ad_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
'analytics_storage': 'granted',
'functionality_storage': 'granted',
'personalization_storage': 'granted',
'security_storage': 'granted'
});
Tentang perilaku spesifik per wilayah
Guna menetapkan status izin default yang berlaku untuk pengunjung dari area tertentu, tentukan wilayah (sesuai dengan ISO 3166-2) di template. Dengan nilai wilayah, pengguna template dapat mematuhi peraturan wilayah tanpa kehilangan informasi dari pengunjung di luar wilayah tersebut. Jika wilayah tidak ditentukan dalam perintah setDefaultConsentState
, nilai tersebut akan berlaku untuk semua wilayah lain.
Misalnya, perintah berikut menetapkan status default untuk analytics_storage
ke denied
bagi pengunjung dari Spanyol dan Alaska, serta menetapkan analytics_storage
ke granted
untuk semua pengunjung lainnya:
const setDefaultConsentState = require('setDefaultConsentState');
setDefaultConsentState({
'analytics_storage': 'denied',
'region': ['ES', 'US-AK']
});
setDefaultConsentState({
'analytics_storage': 'granted'
});
Wilayah yang paling spesifik diutamakan
Jika dua perintah izin default muncul pada halaman yang sama dengan nilai untuk wilayah dan subwilayah, perintah dengan wilayah yang lebih spesifik akan diterapkan. Misalnya, jika ad_storage
ditetapkan ke 'granted'
untuk wilayah US
dan ad_storage
ditetapkan ke 'denied'
untuk wilayah US-CA
, setelan US-CA
yang lebih spesifik akan diterapkan bagi pengunjung dari California.
Wilayah | ad_storage |
Perilaku |
---|---|---|
US | 'granted' |
Berlaku untuk pengguna di US (AS) yang tidak berada di CA (California) |
US-CA | 'denied' |
Berlaku untuk pengguna US-CA (AS-California) |
Belum ditetapkan | 'granted' |
Menggunakan nilai default 'granted' . Dalam contoh ini, nilai tersebut berlaku untuk pengguna yang tidak berada di US atau US-CA
|
Metadata tambahan
Anda dapat menggunakan API gtagSet untuk menetapkan parameter opsional berikut:
API ini hanya tersedia dalam lingkungan sandbox template GTM.
Meneruskan informasi klik iklan, ID klien, dan ID sesi di URL
Saat pengunjung tiba di situs pengiklan setelah mengklik iklan, informasi tentang iklan tersebut mungkin ditambahkan ke URL halaman landing sebagai parameter kueri. Untuk meningkatkan akurasi konversi, tag Google biasanya menyimpan informasi ini dalam cookie pihak pertama di domain pengiklan.
Namun, jika ad_storage
memiliki nilai denied
, tag Google tidak akan menyimpan informasi ini secara lokal. Untuk meningkatkan kualitas pengukuran klik iklan dalam kasus ini, pengiklan dapat memilih untuk meneruskan informasi klik iklan melalui parameter URL di seluruh halaman menggunakan fitur yang disebut passthrough URL.
Demikian pula, jika analytics_storage
ditetapkan ke "denied" (ditolak), passthrough URL dapat digunakan
untuk mengirim analisis berbasis sesi dan peristiwa (termasuk konversi) tanpa
cookie di seluruh halaman.
Kondisi berikut harus dipenuhi agar passthrough URL dapat digunakan:
- Tag Google berbasis izin ada di halaman.
- Situs telah diikutsertakan untuk menggunakan fitur URL passthrough.
- Mode Izin diterapkan di halaman.
- Link keluar merujuk ke domain yang sama dengan domain halaman saat ini.
- gclid/dclid ada di URL (tag Google Ads dan Floodlight saja)
Template Anda harus memungkinkan pengguna template mengonfigurasi apakah ia ingin mengaktifkan setelan ini atau tidak. Kode template berikut digunakan untuk menetapkan url_passthrough ke true:
gtagSet('url_passthrough', true);
Menyamarkan data iklan
Jika ad_storage
ditolak, tidak ada cookie baru yang ditetapkan untuk tujuan periklanan. Selain itu, cookie pihak ketiga yang sebelumnya ditetapkan di google.com dan doubleclick.net tidak akan digunakan. Data yang dikirim ke Google akan tetap menyertakan URL halaman lengkap, termasuk informasi klik iklan apa pun di parameter URL.
Untuk menyamarkan data iklan lebih lanjut saat ad_storage
ditolak, tetapkan ads_data_redaction
ke true.
Jika ads_data_redaction
bernilai true dan ad_storage
ditolak, ID klik iklan yang dikirim dalam permintaan jaringan oleh tag Google Ads dan Floodlight akan disamarkan.
gtagSet('ads_data_redaction', true);
ID developer
Jika Anda adalah vendor CMP dengan ID developer yang dikeluarkan Google, gunakan metode berikut untuk menetapkannya seawal mungkin dalam template Anda.
Anda hanya memerlukan ID developer jika penerapan Anda akan digunakan di beberapa situs oleh perusahaan atau entitas yang tidak terkait. Jika penerapan tersebut akan digunakan oleh satu situs atau entitas, jangan menetapkan ID developer.
gtagSet('developer_id.<your_developer_id>', true);
Memberikan dokumentasi untuk pengguna
Pengguna akan menggunakan template izin Anda untuk menyiapkan tag yang mengumpulkan izin pengguna. Berikan pengguna dokumentasi yang menjelaskan praktik terbaik berikut:
- Cara menetapkan setelan default izin di tabel Setelan.
- Cara menyiapkan setelan default izin untuk berbagai wilayah dengan menyertakan baris tabel tambahan.
- Picu tag berdasarkan pemicu Inisialisasi Izin - Semua Halaman.
Langkah berikutnya
Jika Anda ingin memberikan template Anda kepada semua pengguna Tag Manager, upload template tersebut ke Galeri Template Komunitas.