Menambahkan Google Tag Manager di NuxtJS

March 23, 2021 3 min read
Bagi kamu yang sudah menggunakan Google Analytics, harusnya kamu sudah tahu juga tentang Google Tag Manager, bagaimana cara menambahkannya di project NuxtJS?

Sebelum beranjak ke tutorial, ada baiknya kita mengetahui terlebih dahulu, apa sih Google Tag Manager (GTM) itu? Dan bagaimana cara kerjanya?

Apa Itu Google Tag Manager?

Google Tag Manager (GTM) adalah sistem managemen tag dari Google yang memungkinkan kita untuk melacak, membuat report, dan menganalisa sebuah website dengan serangkaian kode/tag.

Tag-tag yang ada di Google Tag Manager bisa berupa tag konversi, tag analytic, remarketing, dan berbagai tag lainnya.

Google Tag Manager akan memudahkan kita mengelola tag yang terpasang di situs kita, langsung dari satu dashboard Google Tag Manager yang user-friendly.

Karena terintegrasi dengan tools Google lainnya, seperti Adwords dan Analytics, tentu kita tidak perlu menginstal masing-masing tag secara satu persatu.

Kita bisa dengan mudah menambahkan satu tag manager global yang didalamnya berisi tag adwords, tag analytic, maupun tag konversi atau remarketing. Lebih praktis bukan.

Tidak hanya tag dari tools Google saja, kita juga bisa menambahkan berbagai tag lain seperti tag Facebook Ads, tag Pinterest, dan lainnya.

Install Google Tag Manager di NuxtJS

Pertama tambahkan paket Google Tag Manager menggunakan NPM atau yarn.

npm install @nuxtjs/gtm

# atau

yarn add @nuxtjs/gtm


Setelah itu tambahkan modul @nuxtjs/gtm ke dalam nuxt.config.js.

export default {
...
  modules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: 'GTM-XXXXXXX'
  }
...
}


Ubah GTM-XXXXXXX dengan kode tag managermu.

Opsi Google Tag Manager

Berikut ini beberapa opsi yang bisa kamu gunakan di modul GTM.

export default {
...
  gtm: {
    enabled: undefined,
    debug: false,

    id: undefined,
    layer: 'dataLayer',
    variables: {},

    pageTracking: false,
    pageViewEventName: 'nuxtRoute',

    autoInit: true,
    respectDoNotTrack: true,

    scriptId: 'gtm-script',
    scriptDefer: false,
    scriptURL: 'https://www.googletagmanager.com/gtm.js',
    crossOrigin: false,

    noscript: true,
    noscriptId: 'gtm-noscript',
    noscriptURL: 'https://www.googletagmanager.com/ns.html'
  }
...
}

Secara default, Google Tag Manager menggunakan $gtm debug saat proses pengembangan (nuxt dev).

Untuk mengaktifkan Google Tag Manager saat proses development, tambahkan enabled: true.

export default {
...
  gtm: {
    // Selalu mengirim peristiwa GTM secara realtime meskipun saat menggunakan nuxt dev
    enabled: true,
  }
...
}

Menambahkan Google Tag Manager Secara Manual

Untuk menambahkan secara manual, buatlah file gtm.js di folder plugins. Dan isi dengan kode berikut.

export default function({ $gtm, route }) {
  $gtm.init('GTM-XXXXXXX')
}

Ubah GTM-XXXXXXX dengan kode tag managermu.

Selanjutnya, tambahkan plugin dan modul di nuxt.config.js.

export default {
...
 modules: [
  '@nuxtjs/gtm'
 ],
 plugins: [
  '~/plugins/gtm'
 ]
...
}

Modul ini tersedia di Nuxt Modules, dan jika kamu masih bingung, kamu bisa baca dokumentasi lengkap dan contoh penerapannya di nuxt-community/gtm-module


Terima kasih sudah membaca artikel "Menambahkan Google Tag Manager di NuxtJS"
Bagikan
Silahkan Login untuk berkomentar.