Langsung ke konten

Membuat Akun dan Instalasi GTM

Arie Setiawan Arie Setiawan · · Artikel

Lacak progres belajar kamu

Masuk dan daftar kursus ini untuk melacak kemajuan belajar kamu.

Oke, sekarang saatnya menggerakkan tanganmu untuk mengeksplore GTM. Modul ini full praktek dari bikin akun sampai GTM terpasang dan berjalan di website kamu.

Disini saya akan menggunakan website hasil coding pakai AI sebagai playground.

Langkah 1: Buat Akun GTM

  1. Buka tagmanager.google.com
  2. Login pakai akun Google yang biasa kamu gunakan untuk keperluan bisnis
  3. Klik Create Account
  4. Isi detail:
    • Account Name: Nama bisnis atau nama klien kamu (contoh: “Toko Kopi Nusantara”)
    • Country: Indonesia
    • Container Name: Nama website (contoh: “tokokopinusantara.com”)
    • Target Platform: Pilih Web

Halaman pembuatan akun GTM Gambar 2.1: Halaman pembuatan akun GTM

Disini saya tetap mengetikkan domain yang saya punya sebagai playground, walaupun ujungnya saya akan melakukan uji coba di localhost. Dan itu tidak akan jadi masalah.

  1. Klik Create, lalu setujui Terms of Service (Gambar 2.2)

Halaman persetujuan Terms of Service GTM Gambar 2.2: Halaman persetujuan Terms of Service GTM

Setelah itu, GTM akan menampilkan dua potongan kode yang perlu kamu pasang di website (Gambar 2.3).

Dua snippet kode GTM yang perlu dipasang di website Gambar 2.3: Dua snippet kode GTM yang perlu dipasang di website

Satu Akun, Banyak Container

Ini tips yang sering terlewat. Kalau kamu mengelola banyak website (misalnya freelancer yang handle 5 klien berbeda), kamu tidak perlu bikin 5 akun GTM terpisah.

Cukup buat satu akun GTM per bisnis/klien, lalu tambahkan container untuk masing-masing website di dalam akun tersebut. Struktur yang rapi seperti ini akan menyelamatkan kamu di kemudian hari saat jumlah website yang dikelola bertambah.

Langkah 2: Pasang Kode GTM di Website

GTM memberikan dua snippet kode:

Snippet pertama (ditaruh di dalam <head>)

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Snippet kedua (ditaruh tepat setelah tag <body> pembuka)

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Ganti GTM-XXXXXXX dengan ID container GTM kamu yang asli. Kamu bisa lihat ID-nya di pojok kanan atas dashboard GTM (Gambar 2.4).

Lokasi Container ID di pojok kanan atas dashboard GTM Gambar 2.4: Lokasi Container ID di pojok kanan atas dashboard GTM

Cara Pasang per Platform

Berikut cara pasang GTM di tiga platform yang umum dipakai.

WordPress (via Plugin)

Cara paling gampang yaitu dengan menggunakan plugin GTM4WP. Masukkan Container ID (GTM-XXXXXXX) di pengaturan plugin, simpan, selesai. Saya rekomendasikan GTM4WP dibanding plugin lain karena ada integrasi dataLayer bawaan yang berguna untuk WooCommerce.

Contoh penerapan GTM4WP plugin Gambar 2.4.1: Contoh penggunaan GTM4WP

Kalau mau pasang manual tanpa plugin, edit file header.php di tema kamu:

<head>
  <?php wp_head(); ?>

  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
  <!-- End Google Tag Manager -->
</head>
<body <?php body_class(); ?>>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

Pilih salah satu metode: plugin atau manual. Jangan dua-duanya.

Custom HTML

Untuk website HTML biasa, buka file template utama kamu. Tempel kedua snippet seperti contoh di atas:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Website Kamu</title>

  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
  <!-- End Google Tag Manager -->
</head>
<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!-- konten website -->
</body>
</html>

Kalau website kamu punya banyak file HTML terpisah, pastikan snippet ini ada di setiap halaman.

Pakai AI Coding Tools untuk Pasang GTM

Kalau kamu pakai custom website (Astro atau framework lain) dan tidak yakin di mana harus menaruh kode GTM, AI coding tools bisa membantu. Dua yang saya rekomendasikan: Claude Code dan Gemini CLI.

Kedua tools ini bisa membaca codebase kamu, menemukan file layout yang tepat, dan memasang snippet GTM di posisi yang benar. Kamu tidak perlu cari-cari manual file mana yang harus diedit.

Contoh prompt untuk instalasi GTM:

>snippet pertama
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

>snippet kedua
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Pasang Google Tag Manager di website ini. Container ID: GTM-XXXXXXX.
Taruh snippet pertama di <head> dan snippet kedua tepat setelah <body> pembuka.
Pastikan kode GTM ada di semua halaman.

Gambar 2.5 menunjukkan contoh prompt di atas saat dijalankan di Gemini CLI.

Contoh prompt AI coding tools untuk memasang GTM di website custom Gambar 2.5: Contoh prompt AI coding tools untuk memasang GTM di website custom

Setelah tools selesai bekerja, kamu bisa langsung lihat hasilnya di kode (Gambar 2.6).

Hasil pemasangan GTM yang dilakukan oleh AI coding tools Gambar 2.6: Hasil pemasangan GTM yang dilakukan oleh AI coding tools

Contoh prompt untuk verifikasi:

Cek apakah Google Tag Manager sudah terpasang dengan benar di website ini.
Pastikan tidak ada duplikasi kode GTM atau gtag.js yang bisa menyebabkan
double tracking.

Tools ini juga berguna untuk modul-modul selanjutnya saat kamu perlu menambahkan dataLayer.push() di halaman tertentu. Daripada cari file satu per satu, cukup deskripsikan apa yang kamu mau dan biarkan tools yang menemukan file yang tepat.

Satu hal yang perlu kamu tahu sebelum lanjut. Memasang GTM berarti kamu akan mengumpulkan data pengunjung, dan regulasi privasi (termasuk aturan di Indonesia soal perlindungan data pribadi) mengharuskan kamu transparan soal ini.

Minimal yang harus kamu siapkan: halaman Privacy Policy yang menyebutkan bahwa website kamu menggunakan cookies dan tracking tools. Kalau target market kamu termasuk pengunjung dari Eropa, kamu perlu implementasi consent management yang lebih ketat (Consent Mode v2). Topik ini tidak akan dibahas mendalam di kursus ini, tapi penting untuk kamu sadari dari awal.

Langkah 3: Verifikasi Instalasi

Jangan langsung percaya instalasi berhasil tanpa verifikasi. Ada dua cara cepat:

Cara 1: Pakai GTM Preview Mode

  1. Di dashboard GTM, klik tombol Preview (pojok kanan atas)
  2. Masukkan URL website kamu
  3. Kalau muncul panel Tag Assistant di bagian bawah browser, berarti GTM sudah terpasang dengan benar

Ini cara yang paling reliable dan selalu up-to-date karena terintegrasi langsung dengan GTM.

Cara 2: Cek Lewat Browser DevTools

  1. Buka website kamu di Chrome
  2. Klik kanan, pilih Inspect (atau tekan F12)
  3. Buka tab Network, ketik “gtm” di kolom filter
  4. Refresh halaman. Kalau muncul request ke googletagmanager.com dengan status 200, berarti kode GTM sudah termuat

Gambar 2.7 menunjukkan contoh verifikasi lewat gemini, dan Gambar 2.8 menunjukkan GTM berhasil termuat saat testing di localhost.

Verifikasi GTM lewat tab Network di browser DevTools Gambar 2.7: Verifikasi GTM lewat gemini

GTM berhasil termuat saat testing di localhost Gambar 2.8: GTM berhasil termuat saat testing di localhost

Kesalahan Umum Saat Instalasi

Ini beberapa masalah yang paling sering terjadi saat instalasi:

  • Kode dipasang dua kali. Biasanya karena sudah pasang manual di kode, lalu pasang lagi lewat plugin. Hasilnya data ter-double. Pilih salah satu metode saja.
  • Snippet kedua (noscript) diabaikan. Memang tidak kritis, tapi snippet ini membantu tracking untuk pengunjung yang browser-nya menonaktifkan JavaScript. Pasang saja, tidak ada ruginya.
  • ID container salah. Kelihatannya sepele, tapi sering terjadi saat mengelola banyak klien: copy paste ID dari akun yang berbeda. [ANEKDOT: tambahkan pengalaman debugging yang disebabkan ID container tertukar. Berapa lama waktu terbuang, bagaimana akhirnya ketemu?] Selalu double-check ID di dashboard GTM.
  • Lupa is:inline di Astro. Khusus untuk pengguna Astro: tanpa atribut is:inline, Astro akan memproses script GTM dan memindahkannya ke bundle. Akibatnya GTM tidak akan berjalan sama sekali. Kalau kamu sudah verifikasi dan GTM tetap tidak terdeteksi, cek atribut ini pertama kali.

Kalau semua langkah di atas sudah dilakukan dan verifikasi menunjukkan hasil yang benar, selamat. GTM sudah siap digunakan. Di modul berikutnya, kamu akan berkenalan dengan tiga konsep inti GTM yang wajib dipahami: Tags, Triggers, dan Variables.

Arie Setiawan

Ditulis oleh

Arie Setiawan

Founder Labkonversi & Sematin

Full time creator di Threads, lagi bangun tools saas untuk riset iklan di Sematin | Performance marketing specialist di Kitabisa.com 5+ years

Sebelumnya

Apa Itu Google Tag Manager dan Kenapa Kamu Butuh Ini

Selanjutnya

Memahami Tags, Triggers, dan Variables