Terima kasih telah melihat pratinjau dokumentasi platform tag Google yang baru. Situs ini berstatus beta versi publik. (Masukan)

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 memiliki kesempatan untuk 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:

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

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.

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.

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.

const setDefaultConsentState = require('setDefaultConsentState');

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

Setelah pengunjung situs menyatakan pilihan izin mereka, biasanya melalui interaksi dengan banner izin, kode template akan memperbarui status izin sesuai dengan 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',
  'analytics_storage': 'granted',
  'functionality_storage': 'granted',
  'personalization_storage': 'granted',
  'security_storage': 'granted'
});

Perilaku spesifik per wilayah

Untuk menetapkan status izin default yang berlaku untuk pengunjung dari area tertentu, tentukan wilayah di template. Penggunaan nilai wilayah memungkinkan pengguna template 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 Anda memiliki ad_storage yang ditetapkan ke 'granted' untuk wilayah US dan ad_storage yang ditetapkan ke 'denied' untuk wilayah US-CA, pengunjung dari California akan memiliki setelan US-CA yang lebih spesifik yang diterapkan.

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, hal 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 secara opsional meneruskan informasi klik iklan melalui parameter URL di seluruh halaman menggunakan fitur yang disebut passthrough URL.

Demikian pula, jika analytics_storage ditetapkan ke "denied", URL passthrough 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);

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

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

  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.

// 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
 */
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.

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.

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.