Membuat piksel kustom Google Tag Manager

Anda dapat menggunakan Google Tag Manager (GTM) sebagai piksel kustom untuk mengelola piksel pihak ketiga Anda.

Saat Anda siap untuk menguji piksel kustom GTM Anda, gunakan Shopify Pixel Helper untuk memastikan bahwa semua event yang ingin Anda lacak ditambahkan ke sandbox tanpa kesalahan.

Anda juga dapat menggunakan ekstensi halaman Google Tag Assistant untuk menguji tag Google mana yang sedang dimuat di halaman. Namun, fitur Penyelesaian masalah tag Google Tag Assistant tidak kompatibel dengan piksel kustom, dan tidak mendeteksi tag Google apa pun di piksel kustom, atau piksel lain yang dimuat oleh GTM.

Di halaman ini

Persiapan untuk membuat piksel kustom

Sebelum membuat piksel kustom menggunakan Google Tag Manager, tinjau informasi berikut untuk memastikan bahwa Anda memahami cara mengonfigurasi piksel Anda:

Buat atau buka akun Google Tag Manager dan dapatkan ID Wadah GTM.
Demi keamanan, pengelola tag yang dimuat di sandbox kami memiliki batasan yang sama seperti piksel lainnya. Pelajari selengkapnya tentang batasan sandbox piksel.

Membuat piksel kustom Google Tag Manager

Anda dapat membuat piksel kustom Google Tag Manager untuk mengelola piksel pihak ketiga Anda.

Langkah-langkah:

Buka akun Google Tag Manager Anda, lalu pilih akun yang ingin Anda gunakan untuk menyiapkan piksel kustom.
Klik Admin, lalu klik Instal Google Tag Manager untuk membuka kode instalasi.
Salin blok kode yang termasuk dalam bagian head halaman.
Hapus tag HTML dari blok kode. Contohnya, <script></script>.
Masukkan sisa kode ke dalam Piksel Kustom Shopify baru.
Berlangganan event pelanggan dan lakukan push ke dataLayer GTM.
Untuk meninjau bagaimana kode akan ditampilkan, lihat contoh piksel kustom Google Tag Manager.
Konfigurasikan Google Tag Manager untuk menerima event dari Piksel Kustom Anda.
Opsional: Jika Anda memiliki panggilan dataLayer.push(event) yang sudah ada di file checkout.liquid Anda, gantilah dengan analytics.publish().

Berlangganan event pelanggan dan push ke dataLayer GTM

Anda dapat berlangganan event pelanggan menggunakan dataLayer GTM dalam kode piksel kustom Anda.

Secara default, ada serangkaian event standar yang dapat Anda langgani. Namun, jika Anda ingin melacak event pelanggan yang bukan bagian dari event standar, Anda dapat menerbitkan event kustom Anda sendiri dari file template Liquid.

Berikut ini adalah contoh berlangganan event standar “product_viewed”, yang menandakan saat seseorang melihat suatu produk. Saat event terpicu, event tersebut akan di-push ke dataLayer.

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    product_title: event.data?.productVariant?.title,
  });
});

Dalam contoh ini, judul produk diteruskan dalam payload event. Anda dapat menggunakan variabel Google Tag Manager untuk menangkap judul produk dari payload event di tag pilihan Anda.

Contoh piksel kustom Google Tag Manager

Contoh di bawah ini adalah versi sederhana dari piksel kustom Google Tag Manager yang menampilkan cara mengirim data ke Google Tag Manager. Untuk melakukan push lebih banyak event ke dataLayer Anda, Anda dapat berlangganan lebih banyak event standar dan kustom.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(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');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_shipping_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

Konfigurasikan Google Tag Manager untuk menerima event dari Piksel Kustom Anda

Setelah membuat piksel kustom, Anda perlu mengonfigurasi Google Tag Manager untuk menerima event dari piksel kustom Anda. Untuk melakukannya, Anda memerlukan tag, pemicu, dan variabel dataLayer di Google Tag Manager.

Beberapa contoh event pelanggan standar pilihan dan padanannya di Google Tag Manager tercantum dalam tabel berikut:

Daftar event pelanggan Shopify standar untuk digunakan dengan piksel, dibandingkan dengan padanan event pelanggan di Google Tag Manager, ditambah pemicu yang diperlukan agar event dapat aktif.
Event Shopify	Pemicu	Event GTM
payment_info_submitted	Kirim informasi pembayaran	add_payment_info
checkout_address_info_submitted	Kirim informasi pengiriman	add_shipping_info
product_added_to_cart	Tambahkan item ke keranjang belanja	add_to_cart
checkout_started	Mulai checkout	begin_checkout
checkout_completed	Selesaikan checkout	purchase
product_removed_from_cart	Hapus item dari keranjang	remove_from_cart
cart_viewed	Lihat keranjang belanja	view_cart
product_viewed	Lihat halaman detail produk	view_item
collection_viewed	Lihat daftar item	view_item_list

Parameter event tag GTM harus cocok dengan konvensi penamaan yang diharapkan agar event dataLayer piksel kustom Anda dapat diproses.

Beberapa contoh properti event dataLayer piksel kustom pilihan dan padanan parameter event Google Analytics 4 (GA4) adalah sebagai berikut:

Daftar event `dataLayer` piksel kustom menggunakan konvensi penamaan GA4
Event `dataLayer` piksel kustom	Parameter event GA4
`event.data?.checkout?.currencyCode`	`currency`
`event.data?.checkout?.totalPrice?.amount`	`value`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`coupon`
`event.data?.checkout?.shippingLine?.price?.amount`	`shipping`
`event.data?.checkout?.totalTax`	`tax`
`event.data?.checkout?.lineItems`	`items`

Berikut ini contoh penggunaan event checkout_completed:

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

Pemicu Google Tag Manager adalah jenis event kustom dengan nama event checkout_completed. Kolom Nama event di pemicu harus cocok dengan kunci event di piksel kustom Anda.

orderId dan currency adalah variabel yang Anda gunakan di Google Tag Manager untuk menangkap data dari event tersebut. Variabel-variabel ini dapat dipetakan ke variabel dataLayer di Google Tag Manager. Setiap variabel event memerlukan variabel dataLayer-nya sendiri. Atur pemicu agar aktif di semua event kustom.

Buat tag yang menggunakan pemicu yang baru saja Anda buat. Di bawah parameter event, tambahkan variabel yang ingin Anda tangkap. Dalam contoh di atas, orderId, currency, price, shippingLine, dan totalTax akan disiapkan sebagai variabel dataLayer. Setiap kali tag aktif, tag tersebut akan menangkap variabel dataLayer ini bersama dengan event.

Perhatikan bahwa setidaknya satu tag dan pemicu harus disiapkan di Google Tag Manager agar transfer data dapat terjadi.

Mengganti panggilan dataLayer.push(event) lama dengan analytics.publish()

Jika sebelumnya Anda telah menyiapkan Google Tag Manager, Anda perlu mengganti panggilan dataLayer.push dengan panggilan Shopify.analytics.publish(). Anda dapat menemukan panggilan dataLayer.push di file theme.liquid, di bagian Tata Letak pada editor tema Anda.

Anda juga perlu mengganti panggilan dataLayer.push di checkout.liquid. Namun, karena checkout.liquid tidak kompatibel dengan Shopify Extensions, Anda perlu menggunakan ekstensi UI untuk mengirimkan data ke web pixel.

Di bawah ini adalah contoh sederhana dari event pendaftaran email kustom yang dilacak menggunakan dataLayer di file theme.liquid:

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Ekuivalen Shopify ditampilkan dengan cara ini, yang akan mengirimkan data ke piksel kustom Anda:

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Kemudian, di kode piksel kustom Anda, tambahkan sesuatu seperti ini:

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Mengganti dataLayer.push(data) lama

Google Tag Manager memiliki fitur yang memungkinkan Anda mengirimkan objek dataLayer stateful pada setiap event. Meskipun sandbox piksel Shopify tidak menyertakan fitur yang setara, Anda dapat mencapai hasil yang sama dengan membuat objek data Anda sendiri dan meneruskannya ke event kustom.

Misalnya, tentukan objek “customData”, sebelum event kustom Anda diterbitkan:

<script>
  const customData = {email: customer.email}
</script>

Kemudian, kapan pun Anda ingin menyertakan data kustom, teruskan data tersebut ke metode publish Anda:

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Tips untuk menyiapkan Google Analytics 4

Pertimbangkan tips berikut untuk menyiapkan Google Analytics 4 (GA4) saat menggunakan Google Tag Manager sebagai piksel kustom.

URL halaman yang lebih bersih

Saat GA4 berjalan di sandbox, Anda mungkin melihat bahwa URL halaman menyertakan informasi tentang sandbox tempatnya beroperasi. Jika Anda ingin menghapus informasi sandbox dari URL tersebut, Anda dapat menonaktifkan pelacakan halaman otomatis GA4, dan sebagai gantinya mengimplementasikan pelacakan Anda sendiri, dengan menggunakan event page_viewed standar.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

Setelah menerbitkan event Anda sendiri ke dataLayer, Anda dapat membuat tag page_view GA4 yang terpicu pada event page_viewed. Umumnya, Anda dapat menggunakan jenis tag Google Analytics: GA4 Event, dan mengatur Nama Event menjadi page_view. Setelah mengatur jenis tag dan nama event, Anda harus menambahkan parameter untuk page_location dan mengatur nilainya ke nilai yang sama dengan yang telah Anda teruskan ke dataLayer dari piksel kustom Anda.

Pengukuran yang ditingkatkan

Saat memuat GA4 di dalam sandbox piksel Shopify, beberapa event yang biasanya disimpulkan secara otomatis perlu disiapkan secara manual. Misalnya, klik tautan keluar, sebagai bagian dari setelan Pengukuran yang Ditingkatkan GA4, tidak dapat dipicu secara otomatis karena alasan keamanan saat menggunakan piksel kustom. Namun, Anda dapat mengimplementasikan event pengukuran yang ditingkatkan GA4 sendiri sebagai event kustom.

Kode yang disediakan di bawah ini menyertakan contoh sederhana pelacakan klik tautan keluar:

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

Terakhir, di GTM, buat tag GA4 yang mengirimkan klik tautan ke GA4 dengan memastikan nama event adalah click, agar cocok dengan penamaan event yang ditingkatkan GA4.

Anda dapat mencapai pelacakan yang sama untuk setiap metrik pengukuran yang ditingkatkan dari Google.

Uji & debug piksel kustom Anda

Saat Anda siap untuk menguji piksel kustom GTM Anda, gunakan Shopify Pixel Helper untuk memastikan bahwa semua event yang ingin Anda lacak ditambahkan ke sandbox tanpa kesalahan.