gtag.js setup: review dan tutorial cara integrasi dengan AdWords


Simak, gtag.js bukan pengganti ga.js dan analytics.js. Namun, bagaimana dengan yang terlanjur memakai gtag.js "versi lama"?

Google Analytics telah merilis beberapa Javascript library. Sebelum kemunculan gtag.js, sudah ada ga.js, dan analytics.js. Haruskah kita mengganti library lama dengan versi baru tersebut?

Sebelum bertindak lebih, mari kita ketahui apa itu gtag.js?


Mengenal Global Site Tag atau gtag.js

gtag.js merupakan library dari GA (baca: google analytics) yang paling lengkap, dimana library ini bisa digunakan untuk tracking AdWords dan layanan lain dari Google.

Ilustrasinya seperti ini:

  • analytics.js dipergunakan untuk mengukur interaksi user dengan website, lalu mengirim data hits tersebut ke server GA
  • gtm.js difungsikan sebagai library Google Tag Manager
  • firebase.js khusus dipakai untuk mengukur interaksi user dengan mobile apps melalui firebase
  • conversion.js diperuntukkan sebagai library tracking konversi AdWords

Tidak demikian dengan gtag.js. Global Site Tag mampu memuat 4 fungsi dari library di atas hanya dengan single library. Oleh sebab itu, gtag.js jauh lebih sederhana dibanding library-library dari Google lainnya karena:

  • Menyimpan banyak tag untuk produk Google di satu tempat (yaitu di dalam kode gtag.js.
  • Menyederhanakan pemasangan library untuk memudahkan integrasi produk Google dengan web atau app
  • Mengirim data ke banyak tools analytic sekaligus,  tidak membutuhkan tag terpisah atau tambahan

Setelah tahu gambaran mengenai gtag.js, kita masuk ke pembahasan lebih teknis lagi soal script gtag.js.


gtag.js dan AdWords

Seperti biasa, kita bisa memperoleh Javascript librabry Google di dashboard GA.

Halaman untun mendapatkan library gtag.js

Setidaknya, rupa library akan serupa dengan ini:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXXX-X');
  gtag('config', 'AW-XXXXXXXXXX-X');
</script>

Script UA-XXXXXXXXX-X akan berisi kode tracking custom dari GA. Setiap akun akan memiliki kode yang berbeda-beda.

Untuk mengintegrasikan dengan AdWords, kita input script tambahan yaitu gtag('config', 'AW-XXXXXXXXXX-X'); sehingga menjadi:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXXX-X');
  gtag('config', 'AW-XXXXXXXXXX-X');
</script>

Script tambahan tersebut merupakan kode conversion id. Jumlah script bisa ditambah sesuai kebutuhkan. Untuk memperoleh kode tersebut, kita masuk ke AdWords, lalu klik menu conversion. Sebelumnya, pastikan telah membuat campaign baru untuk memraktikkan integrasi gtag.js dengan AdWords.

Apabila masih belum yakin, silakan baca halaman finding google Adwords conversion ID ini.


Struktur library gtag.js

Sama halnya dengan library lainnya, gtag.js pun memiliki perintah atau command tertentu, yaitu:

Perintah: gtag()

Perintah ini ditulis seperti ini:

gtag('config', 'UA-1234567-8');
gtag('config', 'AW-1234567-8');

Kita bisa memasukkan berbagai command queue. Salah satunya command config.  Supaya lebih mudah dipahami, kita coba pelajari command pada library analytics.js  dengan susunan command library ga() sebagai berikut:

ga([trackerName.] [pluginName:] [methodName], [fields], [fieldsObject]);

Script [trackerName.] [pluginName:] [methodName], [fields], [fieldsObject] merupakan command script-nya. Kita bisa memanipulasi script tersebut menjadi:

ga(‘create’, ‘UA-XXXXX-Y’, ‘auto’);
ga(‘send’, ‘pageview’);

Command tersebut (create dan send) dipakai untuk mengukur / melacak semua jenis interaksi pengguna di situs web.

Perintah: config.

Command config merupakan singkatan dari istilah configure. Perintah ini merupakan default property GA untuk menerima data dari command event dan otomatis akan mengirim pageview hit ke default property.

Dengan command ini, kita tidak perlu lagi menambahkan command khusus untuk tracking pageview website.

Apabila kita masih memakai library analytics.js, maka kita harus menyusun command menjadi seperti demikian:

ga(‘create’, ‘UA-1234567-89’, ‘auto’);
ga(‘send’, ‘pageview’);
ga(‘create’, ‘UA-1234567-90′, ‘auto’,{‘name’: ‘WebProperty2’});
ga(‘WebProperty2.send’, ‘pageview’); 

Di sini, gtag.js sangat terlihat lebih sederhana dibanding library versi sebelumnya.

Perintah: event

Selain config, event adalah command fungsional pada gtag.js. Saya ambil dari Google, command ini memiliki susunan sebagai berikut:

gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>
});

Penjelasan untuk masing-masing string di atas sebagai berikut:

  • <action> akan muncul sebagai event action di GA
  • <category> merupakan kategori event.
  • <label> merupakan label event
  • <value> merupakan bilangan bulat non-negatif yang akan muncul sebagai nilai peristiwa.

Saya unggah pula screenshot default event yang disediakan oleh Google:

Default event yang disedikan oleh Google

Apabila kita ingin menggunakan event yang non-interactive, maka tambahkan parameter non_interaction: true seperti ini:

gtag('event', 'video_auto_play_start', {
  'event_label': 'My promotional video',
  'event_category': 'video_auto_play',
  'non_interaction': true
});

Library gtag.js memiliki banyak command, parameter, dan integrasi dengan layanan Google lain (selain yang sudah saya sebutkan di atas). Oleh sebab itu, saya akan tambahkan kembali pembahasan tentang gtag.js, tetapi dengan topik lain.

Featured image by Randompopsycle