Mengonversi tag yang ada

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.

Catatan: Dalam praktiknya, Anda harus menghindari injectScript() dan menerapkan skrip target secara langsung di JavaScript dengan sandbox. Hal ini memerlukan lebih sedikit kepercayaan terhadap pihak ketiga, sehingga cenderung diizinkan oleh Kebijakan yang ditegakkan.

Tag asli

Perhatian: Skrip analytics.js digunakan sebagai contoh di sini, tetapi skrip ini tidak boleh digunakan dalam produksi. Sebagai gantinya, ikuti petunjuk dalam artikel Men-deploy Google Analytics dengan Tag Manager.

<!-- 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.

   

2. Pilih jenis kolom Text input.

   

3. Ubah ID dari text1 menjadi trackingId.

   

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

Catatan: URL skrip biasanya merupakan nilai cacheToken yang baik.

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

Perhatian: Pastikan Anda tidak lupa untuk menyediakan callback data.gtmOnSuccess ke injectScript(). data.gtmOnSuccess harus dipanggil untuk semua template kustom. Jika Anda memberikan callback sukses Anda sendiri, pastikan callback tersebut memanggil data.gtmOnSuccess.

Izin

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

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.

   

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

   

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

   

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

Untuk mengonfigurasi izin Inject Scripts:

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

   

   Catatan: URL Match Patterns memungkinkan penggunaan karakter pengganti untuk subdomain dan jalur, sehingga Anda dapat menggunakan https://www.google-analytics.com/*. Namun, pola pencocokan yang lebih spesifik akan diutamakan jika memungkinkan. Lihat Kebijakan inject_script untuk mengetahui detail kebijakan selengkapnya.

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