Cipta kod piksel tersuai

Awas

Piksel tersuai ialah ciri lanjutan yang memerlukan pengetahuan JavaScript. Pematuhan kepada undang-undang yang berkenaan, persetujuan, keselamatan kod, penyelesaian masalah dan kemaskinian adalah tanggungjawab anda. Piksel tertakluk pada Syarat Perkhidmatan Shopify.

Penambahan dan penggunaan piksel tersuai tidak disokong oleh Shopify. Jika anda memerlukan bantuan untuk menambahkan atau menggunakan piksel tersuai, maka anda boleh mengupah Rakan Kongsi Shopify.

Halaman ini merangkumi arahan untuk mencipta kod piksel tersuai bagi piksel pihak ketiga supaya anda boleh menjejak peristiwa pelanggan yang khusus. Selepas anda mencipta kod untuk piksel tersuai anda, anda boleh menambahkan piksel tersebut pada kedai Shopify anda.

Nota

Sebelum anda mencipta piksel tersuai, anda perlu menyemak aplikasi yang tersedia untuk kestabilan, keselamatan dan prestasi yang dipertingkatkan. Namun begitu, jika tiada aplikasi yang memenuhi keperluan anda, maka anda boleh mencipta piksel tersuai.

Bersedia untuk mencipta piksel tersuai

Sebelum anda mencipta piksel tersuai, semak maklumat yang berikut untuk memastikan anda memahami cara untuk mengkonfigurasi piksel anda:

• Risiko yang berkaitan dengan piksel.
• Had kotak pasir piksel Shopify.
• Menggunakan API kotak pasir piksel Shopify.
• Skema penjejakan peristiwa pelanggan.

Apabila anda menambahkan piksel tersuai, anda menentukan maklumat yang berikut:

• Piksel JavaScript pihak ketiga.
• Peristiwa tingkah laku yang ingin anda jejak.
• Tetapan persetujuan privasi pelanggan.

Cipta kod untuk piksel tersuai

Kembangkan perniagaan anda

Ini ialah tutorial lanjutan dan tidak disokong oleh Shopify. Jika anda memerlukan bantuan untuk menambahkan piksel tersuai, maka anda boleh mengupah Rakan Kongsi Shopify.

Mencipta kod untuk piksel tersuai melibatkan langkah yang berikut:

1. Sediakan SDK Javascript pihak ketiga.
2. Konfigurasi piksel anda untuk menjejak peristiwa pelanggan.
3. Konfigurasi tetapan persetujuan untuk privasi pelanggan bagi piksel anda.

Menyediakan SDK Javascript pihak ketiga

Perkhidmatan pihak ketiga yang anda bekerjasama menyediakan anda dengan kod yang disepadukan dengan piksel tersebut. Sesuatu piksel biasanya mempunyai 2 komponen: SDK Javascript dan kod penjejakan. Sebarang HTML dalam kod perkhidmatan pihak ketiga perlu dialih keluar kerana kotak pasir piksel Shopify hanya menyokong JavaScript.

Berikut ialah contoh Meta pixel. Piksel akan berbeza sedikit dari satu pihak ketiga dengan yang lain.

​​<!-- Meta Pixel Code -->
​​<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->

Selepas mengalih keluar HTML daripada kod Meta, anda hanya mempunyai SDK piksel Meta dan kod untuk memulakannya. Kod penjejakan peristiwa PageView juga telah dialih keluar kerana kod tersebut akan ditambahkan pada langkah yang seterusnya.

​​!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

SDK piksel Meta tidak menghantar data daripada piksel tersuai Shopify secara automatik. Untuk menghantar data, anda perlu melanggan peristiwa.

Anda mungkin terjumpa piksel yang dimuatkan menggunakan script src=. HTML tidak disokong dalam piksel Shopify, oleh itu anda perlu menggantikan script src= dengan persamaan JavaScript.

Berikut ialah sampel piksel Google Analytics yang dimuatkan menggunakan script src=:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

Bahagian script src= boleh digantikan dengan persamaan JavaScript. Sentiasa pastikan atribut src anda sepadan dengan versi HTML:

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

SDK piksel Google tidak menghantar data daripada piksel tersuai Shopify secara automatik. Untuk menghantar data, anda perlu melanggan peristiwa.

Jejak peristiwa pelanggan

Selepas memuatkan dan memulakan SDK piksel, anda perlu menghantar peristiwa ke dalamnya untuk penjejakan. Perkara ini dilakukan dengan melanggan peristiwa dan kemudian menghantar data peristiwa ke dalam SDK piksel untuk diproses oleh perkhidmatan pihak ketiga.

Langgan peristiwa standard

Shopify menawarkan set peristiwa standard, yang memudahkan proses untuk memastikan piksel anda mengumpulkan data yang diperlukan.

Anda boleh melanggan peristiwa menggunakan Shopify Pixels Extension API. Anda perlu meletakkan kod piksel pihak ketiga dalam peristiwa yang anda langgan.

Ini ialah contoh peristiwa PageView untuk piksel Meta. Ambil perhatian bahawa fbq("track") ialah sebahagian daripada kod Meta dan setiap syarikat akan mempunyai versi mereka yang tersendiri yang anda perlu rujuk pada dokumentasi mereka.

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

Beberapa peristiwa mempunyai metadata yang boleh anda hantar ke dalam piksel anda. Berikut ialah contoh cara menghantar beberapa butiran produk ke dalam peristiwa ViewContent Meta:

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

Langgan peristiwa pelanggan tersuai

Jika anda mahu menjejak peristiwa pelanggan tambahan, seperti apabila seseorang mengklik butang, maka anda boleh menambahkan peristiwa pelanggan tersuai. Peristiwa tersuai boleh dilanggan menggunakan cara yang sama seperti peristiwa standard. Isytiharkan nama peristiwa yang ingin anda langgan dan hantar maklumat ke piksel penyedia perkhidmatan pihak ketiga.

Ini ialah contoh cara peristiwa tersuai yang diterbitkan mungkin kelihatan dalam fail Liquid tema anda:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Ini ialah contoh cara anda mungkin mengkonfigurasi piksel anda untuk melanggan peristiwa tersuai tersebut:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Untuk mendapatkan maklumat lanjut tentang peristiwa tersuai, rujuk Dokumentasi Pembangun Shopify.

Mengkonfigurasi tetapan keizinan dan jualan data

Nota

Anda bertanggungjawab ke atas pematuhan privasi anda sendiri dan anda harus merujuk penasihat undang-undang anda sendiri untuk menentukan cara undang-undang di rantau anda, serta rantau tempat anda menjual mungkin mempengaruhi perniagaan anda. Untuk menjual produk menggunakan platform Shopify, anda mesti mematuhi undang-undang bidang kuasa perniagaan anda dan pelanggan anda, Syarat Perkhidmatan Shopify, Dasar Penggunaan Boleh Terima Shopify dan mana-mana dasar lain yang berkenaan. Ketahui lebih lanjut tentang privasi pelanggan.

Dalam pasaran yang dikonfigurasikan supaya memerlukan keizinan, seperti Kawasan Ekonomi Eropah (EEA) dan United Kingdom, piksel web hanya berjalan apabila pelawat laman web telah memberikan kebenaran yang diperlukan dalam konfigurasi piksel.

Secara lalai, piksel tersuai baharu memerlukan kebenaran Pemasaran dan Analisis. Anda boleh menyesuaikan kebenaran yang diperlukan dalam bahagian Privasi pelanggan > Kebenaran pada butiran piksel tersuai anda.

Begitu juga, piksel yang dikonfigurasikan sebagai jualan data tidak akan berjalan untuk pelanggan yang telah menarik diri daripada jualan atau perkongsian data, melainkan piksel tersebut menyokong penggunaan data terhad. Secara lalai, piksel tersuai baharu layak sebagai jualan data. Anda boleh menyesuaikan sama ada data yang dikumpulkan layak sebagai jualan data dalam bahagian Privasi pelanggan > Jualan data pada butiran piksel tersuai anda.

Pembangun piksel tersuai boleh ketahui lebih lanjut tentang cara mengumpulkan dan mendaftarkan keizinan.

Setiap piksel mungkin mempunyai nama yang berbeza untuk setiap tujuan. Anda harus merujuk dokumentasi piksel pihak ketiga untuk memahami cara piksel tersebut dipetakan kepada definisi Shopify.

Sebagai contoh, yang berikut ialah cara tujuan Pemasaran dan Analisis dipetakan kepada Mod Keizinan Google:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

Contoh piksel tersuai

Di bawah ialah contoh kod untuk Meta pixel. Kod piksel berbeza-beza bergantung pada penyedia perkhidmatan pihak ketiga dan peristiwa yang ingin anda jejak. Rujuk rujukan peristiwa pelanggan untuk mendapatkan senarai peristiwa yang tersedia.

Contoh Meta pixel tersuai

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids:  [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

analytics.subscribe("search_submitted", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});