สร้างโค้ดพิกเซลแบบกำหนดเอง

หน้านี้พิมพ์ขึ้นเมื่อ Apr 26, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/promoting-marketing/pixels/custom-pixels/code

หน้านี้มีคําแนะนําในการสร้างโค้ดพิกเซลแบบกำหนดเองสำหรับพิกเซลของผู้ให้บริการภายนอก เพื่อให้คุณสามารถติดตามกิจกรรมเฉพาะของลูกค้าได้ หลังจากสร้างโค้ดสำหรับพิกเซลแบบกำหนดเองแล้ว คุณจะสามารถเพิ่มพิกเซลไปยังร้านค้า Shopify ของคุณได้

ในหน้านี้

การเตรียมสร้างพิกเซลแบบกำหนดเอง

ก่อนที่จะสร้างพิกเซลแบบกําหนดเอง ให้ตรวจสอบข้อมูลต่อไปนี้เพื่อให้แน่ใจว่าคุณเข้าใจวิธีกําหนดค่าพิกเซลของตัวเอง:

เมื่อคุณเพิ่มพิกเซลแบบกำหนดเอง คุณต้องระบุข้อมูลดังต่อไปนี้:

  • พิกเซล JavaScript จากภายนอก
  • เหตุการณ์เชิงพฤติกรรมที่คุณต้องการติดตาม

สร้างโค้ดสำหรับพิกเซลแบบกำหนดเอง

การสร้างโค้ดสำหรับพิกเซลแบบกำหนดเองมีขั้นตอนดังต่อไปนี้:

  1. เตรียม Javascript SDK ของผู้ให้บริการภายนอก
  2. กําหนดค่าพิกเซลของคุณให้ติดตามกิจกรรมของลูกค้า

การเตรียม JavaScript SDK ของผู้ให้บริการภายนอก

บริการจากภายนอกที่คุณร่วมงานด้วยจะมอบโค้ดที่ผสานการทำงานกับพิกเซลให้แก่คุณ โดยพิกเซลมักมีส่วนประกอบอยู่ 2 อย่าง ได้แก่ Javascript SDK และโค้ดติดตาม ทั้งนี้ จะต้องลบ HTML ใดๆ ในโค้ดของบริการจากภายนอกออก เนื่องจาก Sandbox พิกเซลของ Shopify รองรับแต่ JavaScript เท่านั้น

นี่เป็นตัวอย่างพิกเซลของ Meta ซึ่งจะแตกต่างจากพิกเซลของผู้ให้บริการภายนอกรายอื่นเล็กน้อย

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

หลังจากลบ HTML ออกจากโค้ดของ Meta แล้ว คุณจะเหลือ SDK พิกเซลและโค้ดของ Meta ไว้ให้เริ่มต้นใช้งาน นอกจากนี้ ระบบยังได้ลบโค้ดติดตามเหตุการณ์ PageView ออกด้วย เนื่องจากระบบจะเพิ่มโค้ดดังกล่าวเข้าไปในขั้นตอนต่อไป

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

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

คุณอาจพบกับพิกเซลที่ได้รับการโหลดโดยใช้ script src= แต่พิกเซลของ Shopify ไม่รองรับ HTML ดังนั้นคุณจะต้องแทนที่ script src= ด้วยโค้ดที่เทียบเท่ากันจาก JavaScript

ต่อไปนี้คือตัวอย่างพิกเซลของ Google Analytics:

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

คุณสามารถแทนที่ script src= ด้วยโค้ดที่เทียบเท่ากันจาก JavaScript ได้ ทั้งนี้ โปรดตรวจสอบให้แน่ใจทุกครั้งว่าแอตทริบิวต์ src ของคุณตรงกับเวอร์ชัน 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');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

ติดตามกิจกรรมของลูกค้า

หลังจากโหลดและเริ่มต้นใช้งาน SDK ของพิกเซล คุณจะต้องส่งเหตุการณ์ให้ SDK เพื่อทำการติดตาม ซึ่งทำได้โดยโดยสมัครรับข้อมูลเหตุการณ์ แล้วส่งข้อมูลเหตุการณ์ไปยัง SDK ของพิกเซล เพื่อให้บริการจากภายนอกทำการประมวลผล

สมัครรับข้อมูลเหตุการณ์มาตรฐาน

Shopify มีชุดเหตุการณ์มาตรฐาน ซึ่งช่วยให้มั่นใจได้ว่าพิกเซลของคุณจะเก็บรวบรวมข้อมูลได้ตามที่กำหนด

คุณสามารถสมัครรับข้อมูลเหตุการณ์ได้โดยใช้ API ส่วนขยายพิกเซลของ Shopify คุณจะต้องวางโค้ดพิกเซลจากภายนอกไว้กับเหตุการณ์ที่คุณจะสมัครรับข้อมูล

โดยตัวอย่างเหตุการณ์ PageView ของพิกเซลของ Meta มีดังต่อไปนี้ ทั้งนี้ โปรดทราบว่า fbq("track") เป็นส่วนหนึ่งของโค้ด Meta และแต่ละบริษัทจะมีโค้ดนี้ในเวอร์ชันของตัวเอง ซึ่งคุณจะต้องอ้างอิงเอกสารประกอบของแต่ละบริษัทเอง

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

เหตุการณ์บางเหตุการณ์มี Metadata ที่สามารถส่งให้กับพิกเซลได้ โดยตัวอย่างต่อไปนี้คือการส่งต่อรายละเอียดสินค้าบางส่วนให้กับเหตุการณ์ 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,
  });
});

ขอรับข้อมูลกิจกรรมแบบกำหนดเองของลูกค้า

หากต้องการติดตามกิจกรรมเพิ่มเติมของลูกค้า เช่น เมื่อมีคนคลิกที่ปุ่ม คุณสามารถเพิ่มกิจกรรมแบบกำหนดเองของลูกค้าได้ คุณขอรับข้อมูลกิจกรรมแบบกำหนดเองได้โดยใช้วิธีเดียวกันกับกิจกรรมแบบมาตรฐาน ระบุชื่อกิจกรรมที่ต้องการขอรับข้อมูลและส่งข้อมูลดังกล่าวไปยังพิกเซลของผู้ให้บริการภายนอก

นี่เป็นตัวอย่างที่กิจกรรมแบบกำหนดเองที่เผยแพร่อาจแสดงในไฟล์ Liquid ของธีมของคุณ:

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

นี่เป็นตัวอย่างวิธีที่คุณอาจกําหนดค่าพิกเซลของตัวเองให้ขอรับข้อมูลกิจกรรมแบบกำหนดเองนั้นๆ:

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับกิจกรรมแบบกำหนดเองได้ที่เอกสารสำหรับผู้พัฒนา Shopify

พิกเซลเว็บจะทำงานเฉพาะเมื่อผู้เยี่ยมชมได้ให้ความยินยอมเพื่อวัตถุประสงค์ทางการตลาดและการวิเคราะห์ในตลาดที่คุณได้กําหนดค่าให้ต้องระบุความยินยอมเท่านั้น แต่ละพิกเซลอาจมีชื่อแตกต่างกันไปตามวัตถุประสงค์แต่ละรายการ คุณควรอ่านเอกสารประกอบของพิกเซลเพื่อทำความเข้าใจว่ามีการแมปกับคำจำกัดความของ Shopify อย่างไร

ตัวอย่างเช่น ข้อมูลต่อไปนี้คือวิธีการแมปวัตถุประสงค์ทางการตลาดและการวิเคราะห์กับโหมดความยินยอมของ Google

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

ตัวอย่างพิกเซลแบบกำหนดเอง

ด้านล่างนี้คือตัวอย่างโค้ดของพิกเซล Meta โค้ดพิกเซลจะแตกต่างกันไปตามผู้ให้บริการภายนอกและกิจกรรมที่คุณต้องการติดตาม โปรดดูการอ้างอิงเหตุการณ์ของลูกค้าเพื่อดูรายการเหตุการณ์ที่ใช้งานได้

พิกเซลของเมตาแบบกำหนดเอง

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

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี