Panduan memulai cepat template kustom

Template kustom memungkinkan Anda menulis definisi tag dan variabel sendiri, sehingga orang lain dalam organisasi Anda dapat menggunakannya bersama template tag dan variabel bawaan. Dengan template kustom yang menggunakan mekanisme sandbox dan membutuhkan izin akses, Anda dapat menulis tag dan variabel kustom dengan cara yang lebih aman dan efisien daripada jika menggunakan tag HTML kustom dan variabel JavaScript kustom.

Template tag dan variabel kustom ditentukan di bagian Template di Google Tag Manager. Layar utama Template akan mencantumkan semua template tag atau variabel yang telah ditentukan di penampung Anda. Anda juga dapat membuat template baru dari layar ini.

Anda dapat mengekspor template dan membagikannya dengan orang lain di organisasi, dan template dapat dikembangkan untuk distribusi yang lebih luas di Galeri Template Komunitas.

Editor Template

Editor Template dapat digunakan untuk membuat, melihat pratinjau, dan menguji template kustom. Editor ini memiliki empat area input utama untuk membantu Anda menentukan template tag:

  • Info - Menentukan properti dasar template, seperti tag atau nama dan ikon variabel.
  • Kolom - Bagian ini adalah editor visual untuk menambahkan kolom input ke template tag Anda.
  • Kode - Masukkan JavaScript dengan sandbox untuk menentukan perilaku tag atau variabel Anda.
  • Izin - Melihat dan menetapkan batas untuk fungsi tag atau variabel yang diizinkan.

Membuat template tag kustom pertama Anda

Contoh ini akan memandu Anda melalui langkah-langkah untuk membuat tag piksel contoh dasar. Saat diaktifkan di halaman web, tag ini akan mengirim hit dengan informasi akun yang benar ke server penyedia tag.

1. Untuk memulai template pertama Anda, klik Template di navigasi sebelah kiri, lalu klik tombol Baru di bagian Template Tag.

2. Klik Info dan tentukan Nama tag (wajib), Deskripsi, dan Ikon.

Nama adalah apa yang akan ditampilkan kepada pengguna saat mereka menerapkan tag ini di seluruh antarmuka pengguna Tag Manager.

Deskripsi adalah persis seperti namanya - deskripsi singkat (200 karakter atau kurang) tentang fungsi tag ini.

Ikon memungkinkan Anda memilih gambar yang akan muncul saat tag ditampilkan dalam daftar yang mendukung properti ikon. Gambar ikon harus berbentuk file PNG, JPEG, atau GIF persegi, dengan ukuran maksimal 50 kB dan minimal 64 x 64 piksel.

3. Klik Refresh untuk melihat pratinjau template Anda.

Di sebelah kanan input kolom, ada jendela Pratinjau Template. Setiap kali perubahan dibuat dalam editor, tombol Refresh akan muncul. Klik Refresh untuk melihat pengaruh perubahan pada tampilan tag Anda.

4. Klik Kolom untuk menambahkan kolom ke template tag.

Tab Kolom Editor Template memungkinkan Anda membuat dan mengedit kolom di template tag. Kolom digunakan untuk memasukkan data kustom, seperti ID akun. Anda dapat menambahkan elemen formulir standar seperti kolom teks, menu drop-down, tombol pilihan, dan kotak centang.

5. Klik Tambahkan Kolom, lalu pilih Input teks. Ganti nama default (misalnya, "text1") dengan "accountId". Di bagian Pratinjau Template, klik Refresh.

Kolom ini akan memiliki ikon pemilih variabel (ikon pemilih variabel) yang sudah dikenal di sampingnya. Pengguna template ini dapat mengklik ikon pemilih variabel untuk memilih variabel yang aktif dalam penampung ini.

Langkah selanjutnya adalah menambahkan label ke kolom:

6. Klik ikon luaskan (ikon luaskan) di samping kolom teks untuk membuka opsi lainnya untuk kolom ini. Masukkan "ID Akun" di kolom Nama tampilan. Di Pratinjau Template, klik Refresh.

Label teks berjudul "ID Akun" akan muncul di atas kolom.

7. Klik tab Kode dan masukkan JavaScript dengan sandbox di editor:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

Baris pertama kode, const sendPixel = require('sendPixel'), mengimpor API sendPixel.

Baris kedua kode, const encodeUriComponent = require('encodeUriComponent'), mengimpor API encodeUriComponent.

Baris berikutnya, const account = data.accountId;, mendapatkan nilai accountId yang dibuat di langkah 5, dan menyimpannya dalam konstanta yang disebut account.

Baris kode ketiga, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, menyiapkan formulir konstanta url yang menggabungkan endpoint URL tetap yang mencatat data analisis dan ID akun yang dienkode yang digunakan untuk mengonfigurasi tag.

Baris terakhir, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), menjalankan fungsi sendPixel() dengan parameter yang diperlukan dan membuat permintaan ke URL yang ditentukan. Nilai data.gtmOnSuccess dan data.gtmOnFailure akan memberi tahu Google Tag Manager saat tag telah menyelesaikan atau gagal melakukan tugasnya, dan selanjutnya digunakan oleh Google Tag Manager untuk fitur seperti pengurutan tag atau mode pratinjau.

8. Klik Simpan untuk menyimpan progres. Tindakan ini akan memuat izin yang terdeteksi ke Editor Template.

Beberapa API Template memiliki izin yang terkait dengannya yang menentukan fungsi yang dapat atau tidak dapat dilakukannya. Saat Anda menggunakan API template seperti sendPixel di kode Anda, Tag Manager akan menampilkan izin yang relevan di tab Izin.

9. Klik Izin untuk menyaring domain sendPixel yang diizinkan untuk mengirim data. Untuk entri Kirim Piksel, klik ikon luaskan (ikon luaskan) dan masukkan https://endpoint.example.com/ di Pola Pencocokan URL yang Diizinkan.

Saat template tag dikonfigurasi untuk mengirim data, Anda harus menentukan Pola Pencocokan URL yang Diizinkan berdasarkan izin terkait untuk membatasi tujuan pengiriman data. Jika URL yang ditentukan dalam kode Anda tidak cocok dengan pola pencocokan URL yang diizinkan, panggilan sendPixel akan gagal.

Pola pencocokan URL harus menggunakan HTTPS serta menentukan pola host dan jalur. Host dapat berupa domain (misalnya, "https://example.com/") atau subdomain tertentu (misalnya, "https://sub.example.com/"). Jalur harus terdiri dari minimal sebuah "/". Gunakan tanda bintang (*) sebagai karakter pengganti untuk menunjukkan subdomain atau pola jalur dengan panjang berapa pun (misalnya, "https://\*.example.com/test/"). Tanda bintang adalah karakter pengganti yang akan mencakup berbagai kemungkinan pola, misalnya, "\*.example.com/" akan cocok dengan www.example.com, shop.example.com, blog.example.com, dll. Tanda bintang harus di-escape dengan karakter garis miring terbalik: "\*". URL tanpa karakter tambahan (misalnya, "https://example.com/") dianggap berakhir dengan karakter pengganti (yaitu setara dengan "https://example.com/\*".

Tentukan pola pencocokan URL tambahan di baris terpisah.

10. Klik Jalankan Kode dan lihat jendela Konsol untuk memeriksa apakah ada masalah.

Setiap error yang terdeteksi akan muncul di jendela Konsol.

11. Klik Simpan, lalu tutup Editor Template.

Template tag kini telah siap digunakan.

Menggunakan tag baru

Proses pembuatan tag baru yang menggunakan template tag kustom yang baru Anda tetapkan sama seperti tag lainnya:

  1. Di Google Tag Manager, klik Tag > Baru.
  2. Tag baru Anda akan muncul di bagian Kustom di jendela Tag Baru. Klik untuk membuka template tag.
  3. Isi kolom yang diperlukan untuk konfigurasi template tag.
  4. Klik Pemicuan, lalu pilih pemicu yang sesuai terkait kapan tag harus diaktifkan.
  5. Simpan tag dan publikasikan penampung Anda.

Membuat template variabel kustom pertama Anda

Template variabel kustom mirip dengan template tag, dengan beberapa perbedaan mencolok:

  • Template variabel kustom harus menampilkan nilai.

    Bukannya memanggil data['gtmOnSuccess'] untuk menunjukkan status penyelesaian, variabel menampilkan nilai langsung.

  • Template variabel kustom digunakan di berbagai bagian UI Tag Manager.

  • Daripada membuka Tag > Baru untuk membuat variabel baru berdasarkan variabel kustom, buka Variabel > Baru

Lihat membuat variabel kustom untuk mendapatkan panduan lengkap tentang cara membuat template variabel kustom.

Mengekspor dan mengimpor

Untuk membagikan template kustom kepada organisasi, Anda dapat mengekspor template kustom tersebut dan mengimpornya ke penampung Tag Manager lainnya. Untuk mengekspor template:

  1. Di Tag Manager, klik Template.
  2. Klik nama template yang ingin diekspor dari daftar. Tindakan ini akan membuka template di Editor Template.
  3. Klik menu Tindakan Lainnya (), lalu pilih Ekspor.

Untuk mengimpor template:

  1. Di Tag Manager, klik Template.
  2. Klik Baru. Tindakan ini akan membuka template kosong di Editor Template.
  3. Klik menu Tindakan Lainnya (), lalu pilih Impor.
  4. Pilih file .tpl yang ingin Anda impor.