Cara Ambil Parameter UTM dengan JavaScript

by
Contents hide
1 Pendahuluan
2 Web Analytics
3 Capture Data di UTM ke Dalam Database
4 Kode JavaScript untuk Mengambil Data Parameter UTM
5 Verifikasi Variable JavaScript

Pendahuluan

Sehari-hari dalam pekerjaan saya di digital sejak 15 tahun lalu, pasti ada kalanya saya membutuhkan data yang berada di parameter UTM (yang ada di URL) untuk dibawa ke dalam sebuah sistem analytics atau database CRM (Customer Relationship Management), untuk mengetahui source dari conversion tersebut.

Contoh URL di bawah ini:

https://www.andryo.com/blog/cara-ambil-parameter-utm-dengan-javascript/
?utm_source=facebook
&utm_medium=social
&utm_campaign=artikel-bulanan

Misalnya saja website saya adalah website yang mempunyai goal untuk lead generation / mengambil lead – misalnya untuk pinjaman angsuran mobil. Sebagai digital marketer, kita harus tahu campaign atau sumber mana yang berhasil mendapatkan lead, dan bahkan sampai ke bottom of the funnel dimana lead tersebut berhasil mendapatkan settlement / funding / dana pinjaman.

Untuk contoh URL di atas, kita ingin tahu bahwa campaign social media kita di Facebook yang berasal dari campaign artikel bulanan, tidak saja berhasil menjadi lead, tapi juga berhasil untuk mendapatkan sejumlah settlement / funding.

Web Analytics

Dengan tool-tool web analytics seperti Google Analytics atau Adobe Analytics, kita bisa tahu dengan mudah, lead yang berhasil di convert itu datangnya dari mana. Namun yang biasanya sulit untuk didapatkan adalah data setelah interaksi online, misalnya jika interaksi selanjutnya semua terjadi secara offline.

Sering terjadi dalam perusahaan-perusahaan yang bukan murni di digital, misalnya setelah lead di-capture:

  • Call-center / tim sales menelepon lead tersebut.
  • 2 hari kemudian, lead berhasil mengumpulkan semua dokumen yang dibutuhkan, lalu di-submit ke tim aplikasi kredit.
  • Selang 2 hari lagi, aplikasi kredit dari lead baru di-approve.
  • Lalu konsumen/lead tersebut baru memutuskan untuk mengambil pinjaman 2 hari kemudian.

Jika tidak ada data loop dari interaksi offline ke tool analytics yang kita pakai, maka sangat sulit untuk men-track ROI (return of investment) dari aktivitas yang kita jalankan.

Capture Data di UTM ke Dalam Database

Salah satu cara untuk menanggulangi masalah di atas adalah dengan meng-capture data parameter UTM yang ada di URL ke dalam sistem database atau analytics. Jika anda menggunakan sistem CRM seperti Salesforce, Hubspot, atau lainnya, kita bisa menambah data yang kita mau ke dalam form di website. Data-data yang bisa membantu menganalisa ROI dan aktivitas kita misalnya:

  • Data parameter UTM
  • Varian experimen halaman – jika kita melakukan experimen (misalnya a/b testing)
  • Tipe device (ini hanya contoh saja: misalnya saja kita bisa menemukan bahwa pembeli dengan telefon genggam bisa menjadi lead, namun settlement ratenya sangat rendah; Sementara pengguna desktop jauh lebih tinggi funding rate nya)

Jadi data-data di atas ini bisa membantu kita untuk memutuskan aktivitas apa yang kita harus fokuskan lagi, dan target audience mana yang kita bisa tingkatkan – berdasarkan data settlement/funding.

Kode JavaScript untuk Mengambil Data Parameter UTM

Berikut kode JavaScript yang bisa dipakai untuk mengambil data parameter UTM ke sebuah variable JavaScript:

<script>
// Deklarasi path
var pagePath = window.location.pathname;

// Deklarasi semua string parameter di dalam URL
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

// Tangkap data-data yang ada di UTM ke dalam variable di bawah ini
let utmSource = urlParams.get('utm_source');
let utmMedium = urlParams.get('utm_medium');
let utmCampaign = urlParams.get('utm_campaign');
let utmContent = urlParams.get('utm_content');
let utmTerm = urlParams.get('utm_term');
</script>

Dengan kode di atas, data-data UTM yang berada di URL telah di simpan ke variable JavaScript di bawah ini:

  • utmSource untuk source
  • utmMedium untuk medium
  • utmCampaign untuk campaign
  • utmContent untuk content
  • utmTerm untuk term

Data-data tersebut bisa kita pakai lagi di misalnya:

  • Di expose ke form untuk dibawa masuk ke database
  • Di save ke cookie browser

Verifikasi Variable JavaScript

Jika anda klik salah satu contoh link URL di bawah ini (link mempunyai parameter UTM), halaman ini akan me-refresh dan anda akan bisa melihat form di bawah akan terisi dengan data-data UTM dari URL.

Silahkan Klik Contoh Link URL di Bawah Ini

Setelah anda klik salah satu link di atas, dan halaman ini reload, form di bawah ini akan terisi sesuai data UTM parameter di URL:

UTM Source:

UTM Medium:

UTM Campaign:

Dan di bawah ini adalah kode untuk menampilkan data UTM dari URL ke form field di atas

<script>
// Kode untuk menampilkan data UTM ke form field di bawah
document.getElementById("source").value = utmSource;
document.getElementById("medium").value = utmMedium;
document.getElementById("campaign").value = utmCampaign;
</script>

Selamat mencoba sendiri dan semoga membantu

Leave a Comment