Thanks for previewing Google's new tag platform documentation! This site is in public beta. (Feedback)

Mengonversi tag yang ada

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Dalam panduan ini, Anda akan mempelajari cara mengonversi tag HTML kustom yang ada untuk menggunakan JavaScript dengan sandbox.

Tutorial ini akan memanfaatkan API injectScript. injectScript adalah API umum yang digunakan untuk mengonversi tag yang ada yang mengandalkan skrip pihak ketiga. Tag ini sering kali menyiapkan fungsi dasar saat skrip dimuat, lalu mengayakannya dengan fungsi tambahan setelah skrip dimuat.

Tag asli

<!-- Google Analytics -->
<script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXXX-1', 'auto');
  ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

Mengonversi kode

Perhatikan bagian JavaScript dari tag di atas:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');

Untuk membuat JavaScript dengan sandbox yang diperlukan, lihat API JavaScript native yang digunakan skrip ini, dan konversi kode Anda untuk menggunakan API JavaScript dengan sandbox yang setara.

Misalnya, dalam tag analytics.js, API JavaScript native ini digunakan:

JavaScript Native JavaScript dengan Sandbox
window.ga setInWindow
arguments createArgumentsQueue
+ new Date getTimestamp

Untuk menggunakan API JavaScript dengan sandbox dalam skrip, Anda memerlukan require. Misalnya, untuk menggunakan API setInWindow(), tambahkan ke bagian atas skrip Anda:

const setInWindow = require('setInWindow');

Selanjutnya, konversikan window.ga:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');

Lalu, konversikan penetapan ga.l:

ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);

Terakhir, konversikan kedua panggilan menjadi ga():

ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
// becomes
const trackingId = data.trackingId;
ga('create', trackingId, 'auto');
ga('send', 'pageview');

Untuk menggunakan data.trackingId, tambahkan kolom ke template Anda:

  1. Buka tab Fields, lalu klik Add Field.

    Tambahkan kolom

  2. Pilih jenis kolom Text input.

    Pilih Input Teks

  3. Ubah ID dari text1 menjadi trackingId.

    Perbarui ID

Pada tahap ini, Anda telah mengonversi tag <script/> pertama, tetapi Anda juga perlu memuat dalam skrip pendukung.

Untuk melakukannya:

<script async src='https://www.google-analytics.com/analytics.js'></script>
// becomes
const injectScript = require('injectScript');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);

Meneruskan cacheToken ke injectScript() akan mengaktifkan pengoptimalan. Untuk skenario berikut, skrip analytics.js hanya akan dimuat satu kali:

  • Tag yang berjalan beberapa kali
  • Lebih dari satu tag dari template kustom ini dalam penampung yang sama.
  • Template kustom lain yang menggunakan injectScript() dengan cacheToken yang sama

Izin

Jika Anda mencoba menjalankan kode ini sebelum tahap ini, Anda mungkin melihat beberapa error di konsol.

Terjadi error saat mengakses global

Error ini muncul karena JavaScript dengan sandbox mengharuskan Anda untuk mendeklarasikan nilai dan URL yang Anda akses. Dalam contoh ini, Anda perlu mengakses variabel global ga.q, ga.l, dan ga, dan sebaiknya memasukkan skrip yang dihosting di https://www.google-analytics.com/analytics.js.

Untuk mengonfigurasi izin Global Variables:

  1. Buka tab Permissions, Luaskan Accesses Global Variables, lalu klik Add Key.

    Tambahkan kunci di UI

  2. Gunakan ga untuk kunci tersebut, lalu centang kotak untuk Read, Write, dan Execute.

    UI tambahkan kunci Ga

  3. Ulangi proses ini untuk ga.q dan ga.l. Perhatikan bahwa kolom ini tidak memerlukan izin Execute.

    Variabel Global Selesai

Pada tahap ini, jika Anda mengklik Jalankan Kode lagi, Anda akan menerima pesan error baru di konsol. Kali ini, error menyebutkan Inject Scripts.

Error Injeksi Skrip di Konsol

Untuk mengonfigurasi izin Inject Scripts:

  1. Tambahkan https://www.google-analytics.com/analytics.js ke Allowed URL Match Patterns.

    Injeksi Skrip Selesai

Kini saat Anda mengklik Jalankan Kode, seharusnya tidak ada error di konsol. Anda berhasil mengonversi tag menjadi template kustom. Klik Save dan gunakan tag baru Anda seperti Tag lainnya di Google Tag Manager.

Tag yang dikonversi sepenuhnya

Hasil akhir JavaScript dengan sandbox akan terlihat seperti ini:

const setInWindow = require('setInWindow');
const copyFromWindow = require('copyFromWindow');
const createArgumentsQueue = require('createArgumentsQueue');
const getTimestamp = require('getTimestamp');
const injectScript = require('injectScript');
const trackingId = data.trackingId;

const ga = createArgumentsQueue('ga', 'ga.q');
setInWindow('ga.l', getTimestamp(), false);
ga('create', trackingId, 'auto');
ga('send', 'pageview');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);