Cipta piksel tersuai Google Tag Manager

Anda boleh menggunakan Google Tag Manager (GTM) sebagai piksel tersuai untuk mengurus piksel pihak ketiga anda.

Apabila anda bersedia untuk menguji piksel tersuai GTM anda, gunakan Shopify Pixel Helper untuk memastikan semua peristiwa yang ingin anda jejak ditambahkan ke kotak pasir tanpa ralat.

Anda juga boleh menggunakan sambungan halaman Google Tag Assistant untuk menguji tag Google yang sedang dimuatkan pada halaman. Walau bagaimanapun, ciri Troubleshoot tag Google Tag Assistant tidak serasi dengan piksel tersuai dan tidak mengesan sebarang tag Google dalam piksel tersuai atau piksel lain yang sedang dimuatkan oleh GTM.

Pada halaman ini

Bersedia untuk mencipta piksel tersuai

Sebelum anda mencipta piksel tersuai menggunakan Google Tag Manager, semak maklumat yang berikut untuk memastikan anda faham cara untuk mengkonfigurasi piksel anda:

Cipta atau buka akaun Google Tag Manager dan dapatkan ID Kontena GTM.
Untuk keselamatan, pengurus tag yang dimuatkan dalam kotak pasir kami mempunyai sekatan yang sama seperti mana-mana piksel lain. Ketahui lebih lanjut tentang had kotak pasir piksel.

Cipta piksel tersuai Google Tag Manager

Anda boleh mencipta piksel tersuai Google Tag Manager untuk mengurus piksel pihak ketiga anda.

Langkah:

Buka akaun Google Tag Manager anda dan pilih akaun yang ingin anda sediakan piksel tersuai.
Klik Pentadbir dan kemudian klik Pasang Google Tag Manager untuk membuka kod pemasangan.
Salin blok kod yang diletakkan dalam bahagian head pada halaman.
Keluarkan tag HTML daripada blok kod. Sebagai contoh, <script></script>.
Masukkan kod yang selebihnya ke dalam Piksel Tersuai Shopify yang baharu.
Langgan peristiwa pelanggan dan tolak kepada dataLayer GTM.
Untuk menyemak cara kod tersebut patut dipaparkan, rujuk contoh piksel tersuai Google Tag Manager.
Konfigurasikan Google Tag Manager untuk menerima peristiwa daripada Piksel Tersuai anda.
Pilihan: Jika anda mempunyai panggilan dataLayer.push(peristiwa) yang sedia ada dalam fail checkout.liquid anda, maka gantikannya dengan analytics.publish().

Langgan peristiwa pelanggan dan tolak kepada lapisan data GTM

Anda boleh melanggan peristiwa pelanggan menggunakan dataLayer GTM dalam kod piksel tersuai anda.

Secara lalai, terdapat satu set peristiwa standard yang boleh anda langgan. Walau bagaimanapun, jika anda mahu menjejaki peristiwa pelanggan yang bukan sebahagian daripada tawaran peristiwa standard, maka anda boleh menerbitkan peristiwa tersuai anda sendiri daripada fail templat Liquid.

Di bawah ialah contoh melanggan peristiwa standard “product_viewed”, yang menandakan apabila seseorang melihat produk. Apabila peristiwa itu tercetus, tindakan tersebut akan menolak peristiwa kepada dataLayer.

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

Dalam contoh ini, tajuk produk diluluskan dalam muatan peristiwa. Anda boleh menggunakan pemboleh ubah Google Tag Manager untuk menangkap tajuk produk daripada muatan peristiwa dalam tag pilihan anda.

Contoh piksel tersuai Google Tag Manager

Contoh di bawah ialah versi ringkas piksel tersuai Google Tag Manager yang memaparkan cara menghantar data ke Google Tag Manager. Untuk memasukkan lebih banyak peristiwa ke dataLayer anda, anda boleh melanggan lebih banyak peristiwa standard dan tersuai.

// 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 peristiwa daripada piksel tersuai anda

Selepas anda mencipta piksel tersuai, anda perlu mengkonfigurasi Google Tag Manager untuk menerima peristiwa daripada piksel tersuai anda. Untuk berbuat demikian, anda memerlukan tag, pencetus dan pemboleh ubah dataLayer dalam Google Tag Manager.

Beberapa contoh peristiwa pelanggan standard terpilih dan persamaan Google Tag Manager tersebut disenaraikan dalam jadual yang berikut:

Senarai peristiwa pelanggan standard Shopify untuk digunakan dengan piksel, berbanding peristiwa pelanggan yang setara dalam Google Tag Manager, berserta pencetus yang diperlukan untuk peristiwa tersebut dicetuskan.
Peristiwa Shopify	Pencetus	Peristiwa GTM
payment_info_submitted	Serahkan maklumat pembayaran	add_payment_info
checkout_address_info_submitted	Serahkan maklumat pengiriman	add_shipping_info
product_added_to_cart	Tambah item pada troli beli-belah	add_to_cart
checkout_started	Mulakan pembayaran	begin_checkout
checkout_completed	Lengkapkan pembayaran	purchase
product_removed_from_cart	Alih keluar item daripada troli	remove_from_cart
cart_viewed	Lihat troli beli-belah	view_cart
product_viewed	Lihat halaman butiran produk	view_item
collection_viewed	Lihat senarai item	view_item_list

Parameter peristiwa tag GTM perlu sepadan dengan konvensyen penamaan yang dijangka agar peristiwa dataLayer piksel tersuai anda dapat diproses.

Beberapa contoh sifat peristiwa dataLayer piksel tersuai terpilih dan parameter peristiwa Google Analytics 4 (GA4) yang setara adalah seperti yang berikut:

Senarai peristiwa `dataLayer` piksel tersuai yang menggunakan konvensyen penamaan GA4
Peristiwa `dataLayer` piksel tersuai	Parameter peristiwa 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 ialah contoh yang menggunakan peristiwa checkout_completed yang berikut:

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,
  });
});

Pencetus Google Tag Manager ialah jenis peristiwa tersuai dengan nama peristiwa checkout_completed. Medan Nama peristiwa dalam pencetus mesti sepadan dengan kunci event dalam piksel tersuai anda.

orderId dan currency ialah pemboleh ubah yang anda gunakan dalam Google Tag Manager untuk menangkap data daripada peristiwa. Pemboleh ubah ini boleh dipetakan kepada pemboleh ubah dataLayer dalam Google Tag Manager. Setiap pemboleh ubah peristiwa memerlukan pemboleh ubah dataLayer masing-masing. Tetapkan pencetus untuk dicetuskan pada semua peristiwa tersuai.

Cipta tag yang menggunakan pencetus yang baru anda cipta. Di bawah parameter peristiwa, tambahkan pemboleh ubah yang ingin anda tangkap. Dalam contoh di atas, orderId, currency, price, shippingLine dan totalTax akan disediakan sebagai pemboleh ubah dataLayer. Setiap kali tag dicetuskan, pemboleh ubah dataLayer ini akan ditangkap bersama-sama dengan peristiwa tersebut.

Ambil perhatian bahawa sekurang-kurangnya satu tag dan pencetus mesti disediakan dalam Google Tag Manager supaya pemindahan data dapat berlaku.

Menggantikan panggilan dataLayer.push(event) yang lama dengan analytics.publish()

Jika anda pernah menetapkan Google Tag Manager sebelum ini, anda perlu menggantikan panggilan dataLayer.push anda dengan panggilan Shopify.analytics.publish(). Anda boleh mencari panggilan dataLayer.push anda dalam fail theme.liquid anda, di bahagian Susun atur pada penyunting tema anda.

Anda juga perlu menggantikan panggilan dataLayer.push dalam checkout.liquid. Walau bagaimanapun, oleh sebab checkout.liquid tidak serasi dengan Shopify Extensions, anda perlu menggunakan sambungan UI untuk menghantar data ke piksel web.

Di bawah ialah contoh ringkas bagi peristiwa daftar e-mel tersuai yang dijejak menggunakan dataLayer dalam fail theme.liquid:

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

Padanan Shopify dipaparkan dengan cara ini, yang menolak data tersebut ke dalam piksel tersuai anda:

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

Kemudian, dalam kod piksel tersuai anda, anda akan menambahkan sesuatu seperti ini:

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

Gantikan dataLayer.push(data) lama

Google Tag Manager mempunyai ciri yang membolehkan anda menolak objek dataLayer berkeadaan pada setiap peristiwa. Walaupun kotak pasir piksel Shopify tidak menyertakan ciri yang setara, anda boleh mencapai hasil yang sama dengan mencipta objek data anda sendiri dan menghantarnya ke dalam peristiwa tersuai.

Sebagai contoh, takrifkan objek “customData”, sebelum mana-mana peristiwa tersuai anda diterbitkan:

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

Kemudian, apabila anda mahu menyertakan data tersuai anda, hantarkannya ke dalam kaedah terbitkan anda:

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

Petua untuk menyediakan Google Analytics 4

Pertimbangkan petua berikut untuk menyediakan Google Analytics 4 (GA4) apabila menggunakan Google Tag Manager sebagai piksel tersuai.

URL halaman yang lebih bersih

Apabila GA4 dijalankan dalam kotak pasir, anda mungkin mendapati bahawa URL halaman menyertakan maklumat tentang kotak pasir tempat ia beroperasi. Jika anda mahu mengalih keluar maklumat kotak pasir daripada URL tersebut, anda boleh mematikan penjejakan halaman automatik GA4 dan sebaliknya melaksanakan penjejakan anda sendiri, dengan menggunakan peristiwa page_viewed yang standard.

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

Selepas anda menerbitkan peristiwa anda sendiri kepada dataLayer, anda boleh mencipta tag page_view GA4 yang dicetuskan pada peristiwa page_viewed. Paling lazim, anda boleh menggunakan jenis tag Google Analytics: GA4 Event dan tetapkan Nama Peristiwa kepada page_view. Selepas anda menetapkan jenis tag dan nama peristiwa, anda harus menambah parameter untuk page_location dan menetapkan nilainya pada nilai yang sama yang telah anda hantar ke dalam dataLayer anda daripada piksel tersuai anda.

Pengukuran dipertingkatkan

Apabila memuatkan GA4 di dalam kotak pasir piksel Shopify, sesetengah peristiwa yang lazimnya disimpulkan secara automatik perlu disediakan secara manual. Sebagai contoh, klik pautan keluar, sebagai sebahagian daripada tetapan Pengukuran dipertingkatkan GA4, tidak boleh dicetuskan secara automatik atas sebab keselamatan apabila menggunakan piksel tersuai. Walau bagaimanapun, peristiwa pengukuran dipertingkatkan GA4 boleh dilaksanakan sendiri oleh anda sebagai peristiwa tersuai.

Kod yang disediakan di bawah menyertakan contoh ringkas tentang penjejakan klik pautan 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>

Akhir sekali, dalam GTM, cipta tag GA4 yang menghantar klik pautan kepada GA4, dengan memastikan nama peristiwa ialah click, untuk memadankan penamaan peristiwa dipertingkatkan GA4.

Anda boleh mencapai penjejakan yang sama untuk mana-mana metrik pengukuran dipertingkatkan Google.

Uji & nyahpepijat piksel tersuai anda

Apabila anda bersedia untuk menguji piksel tersuai GTM anda, gunakan Shopify Pixel Helper untuk memastikan semua peristiwa yang ingin anda jejak ditambahkan ke kotak pasir tanpa ralat.