Buat kode piksel kustom

Perhatian

Piksel kustom adalah fitur lanjutan yang memerlukan pengetahuan JavaScript. Kepatuhan terhadap hukum yang berlaku, persetujuan, keamanan kode, penyelesaian masalah, dan pembaruan adalah tanggung jawab Anda. Piksel tunduk pada Persyaratan Layanan Shopify.

Penambahan dan penggunaan piksel kustom tidak didukung oleh Shopify. Jika memerlukan bantuan untuk menambahkan atau menggunakan piksel kustom, Anda dapat menyewa Shopify Partner.

Halaman ini berisi petunjuk untuk membuat kode piksel kustom untuk piksel pihak ketiga, sehingga Anda dapat melacak aktivitas pelanggan tertentu. Setelah Anda membuat kode untuk piksel kustom, Anda dapat menambahkan piksel ke toko Shopify.

Catatan

Sebelum Anda membuat piksel kustom, sebaiknya tinjau aplikasi yang tersedia untuk stabilitas, keamanan, dan performa yang lebih baik. Namun, jika tidak ada aplikasi yang memenuhi kebutuhan Anda, Anda dapat membuat piksel kustom.

Mempersiapkan pembuatan piksel kustom

Sebelum membuat piksel kustom, tinjau informasi berikut untuk memastikan Anda memahami cara mengonfigurasi piksel:

• Risiko yang terkait dengan piksel.
• Batasan sandbox piksel Shopify.
• Menggunakan API sandbox piksel Shopify.
• Skema pelacakan aktivitas pelanggan.

Saat menambahkan piksel kustom, Anda menentukan informasi berikut:

• Piksel JavaScript pihak ketiga.
• Aktivitas perilaku yang ingin Anda lacak.
• Pengaturan persetujuan privasi pelanggan.

Membuat kode untuk piksel kustom

Kembangkan bisnis Anda

Ini adalah tutorial tingkat lanjut dan tidak didukung oleh Shopify. Jika Anda memerlukan bantuan untuk menambahkan piksel kustom, Anda dapat menyewa Shopify Partner.

Pembuatan kode untuk piksel kustom mencakup langkah-langkah berikut:

1. Menyiapkan Javascript SDK pihak ketiga.
2. Konfigurasikan piksel Anda untuk melacak aktivitas pelanggan.
3. Konfigurasikan pengaturan persetujuan untuk privasi pelanggan bagi piksel Anda.

Menyiapkan Javascript SDK pihak ketiga

Layanan pihak ketiga yang Anda gunakan akan memberi Anda kode yang terintegrasi dengan piksel. Piksel biasanya memiliki 2 komponen: Javascript SDK dan kode pelacakan. HTML apa pun dalam kode layanan pihak ketiga harus dihapus, karena sandbox piksel Shopify hanya mendukung JavaScript.

Berikut ini contoh Meta pixel. Piksel akan sedikit berbeda antara satu pihak ketiga dengan pihak ketiga lainnya.

​​<!-- 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 -->

Setelah menghapus HTML dari kode Meta, yang tersisa adalah SDK piksel Meta dan kode untuk menginisialisasinya. Kode pelacakan aktivitas PageView juga telah dihapus, karena akan ditambahkan pada langkah berikutnya.

​​!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 secara otomatis mengirimkan data dari piksel kustom Shopify. Untuk mengirimkan data, Anda perlu berlangganan aktivitas.

Anda mungkin menemukan piksel yang dimuat menggunakan script src=. HTML tidak didukung di piksel Shopify, jadi Anda harus mengganti script src= dengan padanan JavaScript.

Berikut adalah contoh piksel Google Analytics yang dimuat 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>

Bagian script src= dapat diganti dengan padanan JavaScript. Selalu pastikan atribut src Anda cocok 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 secara otomatis mengirimkan data dari piksel kustom Shopify. Untuk mengirimkan data, Anda perlu berlangganan event.

Lacak event pelanggan

Setelah memuat dan melakukan inisialisasi SDK piksel, Anda perlu meneruskan event ke dalamnya untuk pelacakan. Ini dilakukan dengan berlangganan event, lalu meneruskan data event ke SDK piksel untuk diproses oleh layanan pihak ketiga.

Berlangganan event standar

Shopify menawarkan serangkaian event standar, yang memudahkan Anda untuk memastikan piksel Anda mengumpulkan data yang diperlukannya.

Anda dapat berlangganan event menggunakan Shopify Pixels Extension API. Anda harus menempatkan kode piksel pihak ketiga bersama dengan event yang Anda langgani.

Ini adalah contoh event PageView untuk piksel Meta. Perhatikan bahwa fbq("track") adalah bagian dari kode Meta, dan setiap perusahaan akan memiliki versi mereka sendiri yang mengharuskan Anda untuk merujuk ke dokumentasi mereka.

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

Beberapa event memiliki metadata yang dapat Anda teruskan ke piksel Anda. Berikut adalah contoh meneruskan beberapa detail produk ke dalam event 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,
  });
});

Berlangganan event pelanggan kustom

Jika ingin melacak event pelanggan tambahan, misalnya saat seseorang mengeklik tombol, Anda dapat menambahkan event pelanggan kustom. Event kustom dapat dilanggani dengan cara yang sama seperti event standar. Deklarasikan nama event yang ingin Anda langgani dan teruskan informasinya ke piksel penyedia layanan pihak ketiga.

Ini adalah contoh bagaimana event kustom yang dipublikasikan dapat muncul di file liquid tema Anda:

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

Ini adalah contoh bagaimana Anda dapat mengonfigurasi piksel Anda untuk berlangganan event kustom tersebut:

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

Untuk informasi selengkapnya tentang event kustom, rujuk ke Dokumentasi Developer Shopify.

Mengonfigurasi pengaturan persetujuan dan penjualan data

Catatan

Anda bertanggung jawab atas kepatuhan privasi Anda sendiri, dan Anda harus berkonsultasi dengan penasihat hukum Anda sendiri untuk menentukan bagaimana undang-undang di wilayah Anda, dan di wilayah tempat Anda menjual, dapat memengaruhi bisnis Anda. Untuk menjual produk menggunakan platform Shopify, Anda harus mematuhi undang-undang yurisdiksi bisnis dan pelanggan Anda, Ketentuan Layanan Shopify, Kebijakan Penggunaan Wajar Shopify, dan kebijakan lain yang berlaku. Pelajari selengkapnya tentang privasi pelanggan.

Di pasar yang dikonfigurasi untuk mewajibkan persetujuan, seperti Wilayah Ekonomi Eropa (EEA) dan Inggris Raya, web pixel hanya berjalan saat pengunjung situs web telah memberikan izin akses yang diwajibkan dalam konfigurasi piksel.

Secara default, piksel kustom baru memerlukan izin akses Pemasaran dan Analitik. Anda dapat menyesuaikan izin akses mana yang diperlukan di bagian Privasi pelanggan > Izin Akses pada detail piksel kustom Anda.

Demikian pula, piksel yang dikonfigurasi sebagai penjualan data tidak akan berjalan untuk pelanggan yang telah memilih untuk tidak ikut dalam penjualan atau pembagian data, kecuali piksel tersebut mendukung penggunaan data terbatas. Secara default, piksel kustom baru memenuhi syarat sebagai penjualan data. Anda dapat menyesuaikan apakah data yang dikumpulkan memenuhi syarat sebagai penjualan data di bagian Privasi pelanggan > Penjualan data pada detail piksel kustom Anda.

Developer piksel kustom dapat mempelajari selengkapnya tentang mengumpulkan dan mendaftarkan persetujuan.

Setiap piksel mungkin memiliki nama yang berbeda untuk setiap tujuan. Anda harus melihat dokumentasi piksel pihak ketiga untuk memahami bagaimana nama tersebut dipetakan ke definisi Shopify.

Misalnya, berikut adalah cara tujuan Pemasaran dan Analitik dipetakan ke Mode Izin Google:

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

Contoh piksel kustom

Di bawah ini adalah contoh kode untuk piksel Meta. Kode piksel bervariasi bergantung pada penyedia layanan pihak ketiga dan event yang ingin Anda lacak. Rujuk ke referensi event pelanggan untuk daftar event yang tersedia.

Contoh piksel Meta kustom

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