Membuat template mode izin

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.

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.

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.

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.

  1. Login ke akun Google Tag Manager.
  2. Di navigasi sebelah kiri, pilih Template.
  3. Di panel Template Tag, klik Baru.
  1. Pilih tab Kolom, lalu klik Tambahkan Kolom > Tabel parameter.
  2. Ganti namanya menjadi defaultSettings.
  3. Luaskan kolom.
  4. Perbarui Nama tampilan menjadi Default settings.
  5. Klik Tambahkan kolom, pilih Input teks, ubah namanya menjadi region lalu centang kotak Nilai kolom harus unik.
  6. 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.
  7. Klik Tambahkan kolom, pilih Input teks, ubah namanya menjadi granted.
  8. Luaskan kolom dan ubah nama tampilan menjadi Granted Consent Types (comma separated).
  9. Klik Tambahkan kolom, pilih Input teks, ubah namanya menjadi denied.
  10. Luaskan kolom dan ubah nama tampilan menjadi Denied Consent Types (comma separated).

Opsional: Guna menambahkan dukungan untuk menyamarkan data iklan:

  1. Klik Tambahkan Kolom, pilih Kotak Centang, dan ubah nama kolom menjadi ads_data_redaction.
  2. Perbarui Nama tampilan menjadi Redact Ads Data.

Pelajari lebih lanjut perilaku cookie dengan penyamaran data iklan.

Opsional: Guna menambahkan dukungan untuk meneruskan parameter URL:

  1. Klik Tambahkan Kolom, pilih Kotak Centang, dan ubah nama kolom menjadi url_passthrough.
  2. Perbarui Nama tampilan menjadi Pass through URL parameters.

Pelajari lebih lanjut cara meneruskan parameter URL.

Untuk menambahkan kode penerapan:

  1. Buka tab Kode di editor template.
  2. Dalam contoh kode di bawah, edit kolom placeholder.
  3. Salin kodenya dan ganti kode boilerplate di editor template dengan kode tersebut.
  4. 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.

  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
  6. Ulangi langkah 2–5 untuk ad_user_data, ad_personalization, dan analytics_storage. Jika Anda memerlukan jenis izin tambahan, tambahkan jenis izin tersebut dengan cara yang sama.
  7. Klik Simpan.

Guna menambahkan izin 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.

2. Membuat pengujian unit

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

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);
  });
};

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.