Menkoneksikan Google Analytics GA4 ke Gatsby.js

Pada artikel ini kita akan mencoba menambahkan fitur analytics GA4 ke dalam aplikasi gatsby.js kita menggunakan plugin gtag.

GA4 adalah cara untuk tracking interaksi pengguna dengan situs web mapupun aplikasi seluler. GA4 memberikan data yang lebih mendetail tentang peristiwa dan tindakan yang terjadi di situs atau aplikasi Anda.

Ada beberapa langkah yang harus dimulai untuk mengkoneksikan GA4 ke aplikasi kita diantaranya: membuat akun google analytics, mendapatkan kode meaurement id, menginstall plugin dan melakukan testing apakah analytics telah terinstall dengan benar.

Membuat Akun Google Analytics 4.0

Untuk menggunakan google analytics 4.0, bagi kalian yang belum memiliki akun bisa dapat mengunjungi halaman Google Analytics untuk membuat akun terlebih dahulu, kalian akan dipandu ketika melakukan setup akun.

Klik Start Measuring, lalu masukkan nama akun. Untuk contoh dibawah ini saya akan berikan nama Application Account, kalian bisa sesuaikan nama untuk project kalian masing-masing.

Klik next, lalu masukkan nama properti.

Selanjutnya kalian bisa sesuaikan untuk Bussiness information sesuai dengan kebutuhan anda.

Mendapatkan Measurement ID

Kode Measurement ID merupakan kode unik yang digunanakan untuk pengumpulan data. Kode Measurement ID ini ditandai dengan awalan G-, constoh: G-123ABC. Untuk mendapatkan kode Measurement ID ini kita dapat navigasi ke halaman Properti - Aliran Data, Kemudian kita dapat memilih opsi web.

Jika kalian mengikuti step sebelumnya, maka kalian akan secara otomatis dialihkan ke halaman tersebut.

Selanjutnya kita dapat mengisi url website kita dan nama stream.

Setelah dibuat maka kode Measurement ID kita akan muncul seperti dibawah ini.

Karena sekarang kita telah memiliki kode Measurement ID, langkah selanjutnya yaitu menambahkan kode tersebut ke dalam aplikasi Gatsby.js kita.

Menginstall Plugin

Gatsby telah menyediakan plugin gatsby-plugin-google-gtag untuk memudahkan dalam mengkoneksikan aplikasi kita ke Google Analytics.

pada root project aplikasi, kita dapat jalankan perintah berikut.

npm install gatsby-plugin-google-gtag

Mengkonfigurasi Plugin

Kalian bisa melihat ke referensi gatsby-plugin-google-gtag untuk mendapatkan detail opsi serta semua konfigurasi yang ditawarkan oleh plugin tersebut.

Untuk sementara kita cukup menambahkan kode berikut,

module.exports = [
  {
    resolve: `gatsby-plugin-google-gtag`,
    options: {
      trackingIds: ["G-123ABC"],
      pluginConfig: {
        head: true,
        respectDNT: true,
      },
    },
  },
];

Kalian bisa masukkan kode Measurement ID tersebut ke dalam options trackingIds seperti contoh diatas.

Testing Data Analytics

Untuk melakukan test, kita bisa melakukannya di local environtment dengan mem-build aplikasi kita. Untuk melakukan build production kita dapat menjalankan perintah berikut.

npm run build

lalu, jalankan

npm run serve

Setelah build selesai kita dapat mengecek website kita pada halaman http://localhost:9000, konfigurasi ini mungkin akan bervariasi sesuai dengan konfigurasi development kalian masing-masing

Cek halaman dashboard google analytics di bagian real-time, kalian akan melihat data analytics kita telah masuk ke dashboard. Jika kalian melihat data tersebut maka artinya kita telah berhasil mengkoneksikan aplikasi gatsby kita ke google analytics.

Jika kalian tidak dapat melihat data analytics yang masuk ke dashboard, kalian dapat cek kembali step diatas, atau lihat referensi GA4 - Set up Analytics for a website and/or app.

Kalian juga dapat mengecek view source code website kita pada browser dan pastikan bahwa kode Google Analytics telah ada di halaman tersebut seperti contoh dibawah.

Masukkan ke Environtment Variable (Opsional)

Pada contoh sebelumnya, kita telah menambahkan kode Measurement ID kita ke langsung ke dalam file gatsby-config.js. Namun hal ini menimbulkan bahwa kode Measurement ID kita akan terekspose ke source code kita, yang mungkin akan lebih baik jika kita sembunyikan dengan menggunakan environtment variables.

Untuk mengkonfigurasi environtment variables kita bisa membuat file dengan nama .env di root project kita. dan masukkan kode measurement id kalian.

GA_ID="G-123ABCDE"

lalu pada file gatsby-config.js kita ubah seperti berikut

module.exports = [
  {
    resolve: `gatsby-plugin-google-gtag`,
    options: {
      trackingIds: [process.env.GA_ID],
      pluginConfig: {
        head: true,
        respectDNT: true,
      },
    },
  },
];

Karena kita menggunakan .env pastikan file tersebut masuk ke dalam file .gitignore agar file env tersebut tidak masuk kedalam public repository kita.

Setup Measurement ID di production

Environtment variable yang tersimpan di lokal dapat berjalan dengan baik ketika kalian melakukan development. Namun bagaimana untuk production? Pada tahap ini kita akan menambahkan environtment variable ke production environtment.

Pada contoh ini saya telah deploy aplikasi di Gatsby Cloud. Untuk menambahkan environtment kalian bisa navigasi ke Site Settings - Environtment Variables.

Kalian bisa tambahkan Environtment variable dengan Edit Variables lalu Add Variables dan isikan key GA_ID dan value sesuai dengan measurement id kalian masing-masing.

Kesimpulan

Sampai pada tahap ini, kalian telah berhasil menkoneksikan Google Analytics 4 ke aplikasi gatsby kita, jika kalian membutuhkan referensi lebih lanjut kalian bisa cek link berikut.

• Google Analytics
• Gatsby Plugin Google Gtag
• Gatsby Environtment Variables