Membuat template Mode Izin

Jika Anda mengelola solusi pengelolaan izin untuk situs yang menggunakan Google Tag Manager (GTM), sebaiknya buat template untuk mendukung Mode Izin Google. Template Mode Izin memungkinkan pengguna Anda menggunakan Mode Izin dan mengintegrasikannya dengan solusi izin mereka tanpa kode, sehingga menghemat waktu dan tenaga secara signifikan.

Template Mode Izin mendukung pembuatan tag yang menetapkan status izin default dan mengomunikasikan pilihan izin pengunjung kepada Google Tag Manager. Hal ini memastikan fungsi optimal 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 alat pilih Galeri Template.

Halaman ini memperkenalkan status izin dan jenis izin serta menunjukkan cara menggunakannya dengan Consent Mode API. Bagian terakhir memberikan contoh cara menggunakan API untuk membuat template Tag Manager. Jika Anda baru menggunakan Mode Izin atau template Tag Manager, artikel berikut memberikan informasi latar belakang:

• Mode Izin
• Panduan memulai cepat template kustom
• Mengelola setelan izin

Catatan: Platform Pengelolaan Izin (CMP) umumnya merujuk pada solusi pengelolaan izin yang disediakan oleh vendor. Halaman ini menggunakan singkatan CMP untuk merujuk ke solusi pihak ketiga dan internal.

Status izin dan jenis izin

Tag Google dan pihak ketiga menyesuaikan perilaku penyimpanannya berdasarkan status izin: granted atau denied. Tag tersebut dapat dilengkapi pemeriksaan izin untuk salah satu jenis izin berikut:

Jenis Izin	Deskripsi
ad_storage	Memungkinkan penyimpanan, seperti cookie yang terkait dengan iklan
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

Catatan: Jika Anda menawarkan opsi izin yang tidak dipetakan ke jenis izin ini, Anda juga dapat memberikan jenis izin kustom dengan memberikan kunci jenis izin Anda sendiri.

Template tersebut harus memberi pengguna kemampuan untuk menetapkan status izin default untuk setiap jenis izin yang digunakan oleh situs mereka. Mereka sebaiknya juga menetapkan status izin default untuk wilayah yang berbeda.

Pengguna GTM harus mengaktifkan tag yang dibuat dengan template Anda di semua halaman menggunakan pemicu Inisialisasi Izin. Hal ini akan memastikan tag tersebut diaktifkan sebelum tag lainnya. Kode template harus menetapkan status izin default yang dikonfigurasi segera setelah diaktifkan. Kemudian, CMP harus meminta pengunjung untuk sesegera mungkin memberikan atau menolak izin untuk semua jenis izin yang berlaku. Saat pengunjung menyatakan pilihan mereka, CMP harus meneruskan status izin yang telah diperbarui melalui API template yang sesuai. Mode Izin terus melacak pilihan izin pengunjung dan pemeriksaan izin tag akan memastikan perilaku tag disesuaikan.

Consent API

Penerapan Mode Izin di situs yang memanfaatkan GTM untuk pemberian tag harus menggunakan API khusus GTM untuk mengelola status izin, yaitu setDefaultConsentState dan updateConsentState. Secara opsional, situs tersebut dapat menggunakan API gtagSet untuk menetapkan setelan ads_data_redaction dan url_passthrough yang sesuai. API ini hanya tersedia dalam lingkungan sandbox template GTM.

Status izin default harus ditetapkan seawal mungkin saat halaman dimuat, menggunakan peristiwa Inisialisasi Izin untuk memicu tag. Pembaruan izin harus diinformasikan ke GTM sesegera mungkin setelah pengguna memberikan izin, atau saat pilihan izin sebelumnya dari pengguna dimuat dari cookie. Ada sejumlah kemungkinan pendekatan untuk memicu updateConsentState. Contoh di bagian selanjutnya dalam artikel ini menunjukkan dua kemungkinan opsi.

Catatan: gtag (consent, update, ...) tidak boleh digunakan sebagai pengganti updateConsentState karena metode tersebut akan dimasukkan ke antrean setelah semua pesan tertunda lainnya dan mungkin tidak akan diproses sebelum peristiwa berikutnya dimulai. Untuk informasi selengkapnya, lihat artikel Cara informasi lapisan data diproses.

Status izin default

Untuk mengonfigurasi setelan izin default, gunakan API setDefaultConsentState. Contoh berikut mengilustrasikan penggunaan panggilan setDefaultConsentState. Metode ini menolak ad_storage secara default dan memberikan izin ke jenis penyimpanan lainnya. Metode ini juga menggunakan wait_for_update sehingga ada waktu untuk menerima pilihan pengunjung dari CMP.

Catatan: Biasanya ini bukan panggilan statis. Pengguna template harus dapat menetapkan jenis izin default agar sesuai dengan kebijakan organisasi saat membuat tag dari template Anda. Lihat Contoh penerapan untuk mengetahui cara melakukannya menggunakan kolom template kustom.

const setDefaultConsentState = require('setDefaultConsentState');

setDefaultConsentState({
  'ad_storage': 'denied',
  'analytics_storage': 'granted',
  'functionality_storage': 'granted',
  'personalization_storage': 'granted',
  'security_storage': 'granted',
  'wait_for_update': 500
});

Memperbarui status izin

Setelah pengunjung situs menyatakan pilihan izin mereka, biasanya melalui interaksi dengan banner izin, kode template akan memperbarui status izin sesuai dengan API updateConsentState.

Catatan: Panggilan updateConsentState harus dijalankan seawal mungkin di halaman setelah panggilan yang dibuat saat pengguna berinteraksi dengan banner izin. Jika memungkinkan, sebaiknya gunakan kode sandbox template untuk membaca izin pengguna langsung dari cookie yang menyimpannya, bukan menggunakan kode eksternal. Contoh cara melakukannya tersedia di akhir artikel ini. Jika perlu membuat permintaan jaringan atau melakukan tugas asinkron lainnya sebelum memanggil updateConsentState, Anda harus menentukan waktu tunggu minimal 500 milidetik di kolom wait_for_update saat memanggil setDefaultConsentState. Dengan demikian, tugas tersebut dapat diselesaikan sebelum tag Google diaktifkan. Untuk mengetahui informasi selengkapnya, lihat artikel Mengintegrasikan dengan platform pengelolaan izin asinkron.

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',
  'analytics_storage': 'granted',
  'functionality_storage': 'granted',
  'personalization_storage': 'granted',
  'security_storage': 'granted'
});

Perilaku spesifik per wilayah

Agar dapat 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

Meneruskan informasi klik iklan, client ID, dan ID sesi di URL

Saat pengunjung membuka 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 ditetapkan ke 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 ditetapkan 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);

Catatan: Jika Anda menambahkan opsi untuk menetapkan passthrough URL di template, passthrough URL tersebut masih harus dikonfigurasi di dalam tag Conversion Linker dan Universal Analytics (jika digunakan) agar berfungsi seperti yang diharapkan. Untuk informasi selengkapnya tentang praktik terbaik saat menggunakan passthrough URL, lihat artikel Mengelola Setelan izin.

Menyamarkan data iklan

Jika ad_storage ditolak, cookie baru tidak akan ditetapkan untuk tujuan iklan. 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.

gtagSet('ads_data_redaction', 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.

ID developer

Jika Anda adalah vendor CMP dengan ID developer yang dikeluarkan Google, gunakan metode berikut untuk menetapkannya seawal mungkin dalam template Anda.

gtagSet('developer_id.<your_developer_id>', true);

Catatan: ID developer hanya diperlukan saat Anda membangun penerapan yang akan digunakan di beberapa situs oleh perusahaan atau entitas yang tidak terkait. Jika penerapan tersebut akan digunakan oleh satu situs atau entitas, jangan terapkan untuk ID developer.

Contoh penerapan

Contoh ini menunjukkan cara membuat template yang membaca cookie dari solusi pengelolaan izin untuk mendapatkan pilihan izin pengunjung. Cara ini akan membuat pilihan tersebut tersedia untuk GTM sesegera mungkin selama proses pemuatan saat pengunjung membuat pilihan di halaman sebelumnya.

Untuk mengikuti contoh ini, Anda akan membuat 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.

Langkah utamanya meliputi:

• Menggunakan Editor Template untuk membuat template
• Mengintegrasikan template dengan solusi izin
• Penyiapan pengguna template

Menggunakan Editor Template untuk membuat template

1. Login ke akun Google Tag Manager.
2. Di navigasi sebelah kiri, pilih Template.
3. Di panel Template Tag, klik Baru.

Menambahkan Kolom

1. Di bagian tab Kolom, klik Tambahkan Kolom.
2. Pilih Tabel parameter.
3. Ganti nama menjadi defaultSettings.
4. Luaskan kolom.
5. Perbarui Nama tampilan menjadi Default settings.
6. Klik Tambahkan kolom, pilih Input teks, ubah namanya menjadi region lalu centang kotak Nilai kolom harus unik.
7. 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.
8. Klik Tambahkan kolom, pilih Input teks, ubah namanya menjadi granted.
9. Luaskan kolom dan ubah nama tampilan menjadi Granted Consent Types(comma separated).
10. Klik Tambahkan kolom, pilih Input teks, ubah namanya menjadi denied.
11. Luaskan kolom dan ubah nama tampilan menjadi Denied Consent Types (comma separated).
12. Klik Tambahkan Kolom, pilih Kotak Centang, dan ubah nama kolom menjadi ads_data_redaction.
13. Perbarui Nama tampilan menjadi Redact Ads Data.

Menambahkan Kode

Salin kode di bawah dan ganti parameter dalam tanda kurung (nama cookie dan periksa status izin yang telah diperbarui) dengan parameter yang sesuai untuk penerapan Anda. Setelah diperbarui, gunakan kode Anda untuk mengganti kode boilerplate di tab Kode GTM. Simpan template setelah menempelkannya.

Catatan: Saat Anda pertama kali menyimpan kode, error validasi akan terjadi. Masalah ini akan diselesaikan saat Anda menambahkan nama cookie nanti di tab Izin.

// 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 = '<replace_with_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',
    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
 * 
 * Note: Developer IDs are only required when you're building an implementation
 * that will be used across multiple websites by unrelated companies or
 * entities. If the implementation will be used by one site or entity,
 * please do not apply for a developer ID.
 */
const main = (data) => {
  // Set developer ID
  gtagSet('developer_id.<replace_with_your_developer_id>', true);
  // Set default consent state(s)
  data.defaultSettings.forEach(settings => {
    const defaultData = parseCommandData(settings);
    defaultData.wait_for_update = 500;
    setDefaultConsentState(defaultData);
  });
  gtagSet('ads_data_redaction', data.ads_data_redaction);
  // Check if cookie is set and has values that corresopnd 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();

Menambahkan Izin

Selanjutnya, konfigurasikan izin untuk mengakses status izin dan untuk mengakses cookie.

Untuk mengelola status izin:

1. Pilih tab Izin lalu klik Status izin akses.
2. Klik Tambahkan jenis izin.
3. Klik kotak dan pilih ad_storage dari menu drop-down.
4. Centang Tulis.
5. Klik Tambahkan

Ulangi langkah 2-5, mengganti analytics_storage dengan ad_storage.

Selesaikan dengan mengklik Simpan.

Catatan: Jika pengguna template perlu mengelola jenis izin selain ad_storage dan analytics_storage, tambahkan jenis tersebut dengan cara yang sama.

Untuk mengakses cookie:

1. Pilih tab Izin lalu klik Baca nilai cookie.
2. Pada bagian Spesifik, masukkan nama setiap cookie yang harus dibaca kode Anda untuk menentukan pilihan izin pengguna, satu nama per baris.
3. Klik Simpan.

Pengujian

Lihat Pengujian untuk mendapatkan informasi tentang cara membuat pengujian untuk template Anda.

Mengintegrasikan template dengan solusi izin

Kode berikut menunjukkan satu contoh cara integrasi template ini dengan kode untuk solusi pengelolaan izin Anda dengan menambahkan 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);
  });
};

Penyiapan pengguna template

Anda harus menyediakan dokumentasi untuk pengguna template. Mereka akan menggunakan template ini untuk menyiapkan tag yang menggunakan pemicu Inisialisasi Izin - Semua Halaman. Di tabel Setelan, pengguna harus memasukkan daftar jenis izin dan apakah mereka ingin memberikan atau menolak masing-masing izin secara default. Jika setelan default harus berbeda berdasarkan lokasi pengguna, mereka harus membuat satu baris untuk setiap kumpulan wilayah yang memiliki status izin default yang sama.