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

ข้อควรระวัง

พิกเซลแบบกำหนดเองเป็นฟีเจอร์ขั้นสูงที่ต้องใช้ความรู้เกี่ยวกับ JavaScript การปฏิบัติตามกฎหมายที่บังคับใช้ การให้ความยินยอม ความปลอดภัยของโค้ด การแก้ไขปัญหา และการอัปเดตล้วนเป็นความรับผิดชอบของคุณ พิกเซลจะอยู่ภายใต้ข้อตกลงในการใช้บริการของ Shopify

การเพิ่มและใช้งานพิกเซลแบบกำหนดเองไม่ได้รับการช่วยเหลือจาก Shopify หากคุณต้องการความช่วยเหลือในการเพิ่มหรือใช้งานพิกเซลแบบกำหนดเอง คุณสามารถจ้าง Shopify Partner ได้

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

หมายเหตุ

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

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

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

• ความเสี่ยงที่เกี่ยวข้องกับพิกเซล
• ข้อจำกัดของแซนด์บ็อกซ์พิกเซลของ Shopify
• การใช้งาน API แซนด์บ็อกซ์พิกเซลของ Shopify
• สคีมาการติดตามกิจกรรมของลูกค้า

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

• พิกเซล JavaScript ของบุคคลภายนอก
• กิจกรรมเชิงพฤติกรรมที่คุณต้องการติดตาม
• การตั้งค่าการให้ความยินยอมเกี่ยวกับความเป็นส่วนตัวของลูกค้า

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

ขยายธุรกิจของคุณ

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

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

1. เตรียม Javascript SDK ของบุคคลภายนอก
2. กำหนดค่าพิกเซลของคุณเพื่อติดตามกิจกรรมของลูกค้า
3. กำหนดค่าการตั้งค่าการให้ความยินยอมเกี่ยวกับความเป็นส่วนตัวของลูกค้าสำหรับพิกเซลของคุณ

การเตรียม Javascript SDK ของบุคคลภายนอก

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

นี่คือตัวอย่างพิกเซลของเมตา พิกเซลจะแตกต่างกันเล็กน้อยในแต่ละบริการของบุคคลภายนอก

​​<!-- 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 ออกจากโค้ดของเมตาแล้ว คุณจะเหลือ SDK พิกเซลของเมตาและโค้ดสำหรับเริ่มต้นการทำงาน รหัสติดตามกิจกรรม 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);

SDK พิกเซลของเมตาไม่ได้ส่งข้อมูลจากพิกเซลแบบกำหนดเองของ Shopify โดยอัตโนมัติ หากต้องการส่งข้อมูล คุณต้องสมัครรับข้อมูลกิจกรรม

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

นี่คือตัวอย่างพิกเซลของ Google Analytics ที่โหลดโดยใช้ 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>

ส่วนที่เป็น 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');

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

ติดตามอีเวนต์ของลูกค้า

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

สมัครรับข้อมูลอีเวนต์มาตรฐาน

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

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

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

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

บางอีเวนต์มี Metadata ที่คุณสามารถส่งเข้าไปในพิกเซลของคุณได้ นี่คือตัวอย่างการส่งผ่านรายละเอียดสินค้าบางส่วนไปยังอีเวนต์ ViewContent ของเมตา

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 คุณจะต้องปฏิบัติตามกฎหมายในเขตอำนาจศาลของธุรกิจและลูกค้าของคุณ รวมถึงข้อกำหนดในการให้บริการของ Shopify นโยบายการใช้งานที่ยอมรับได้ของ Shopify และนโยบายอื่นๆ ที่เกี่ยวข้อง ดูข้อมูลเพิ่มเติมเกี่ยวกับความเป็นส่วนตัวของลูกค้า

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

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

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

นักพัฒนาพิกเซลที่กำหนดเองสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับการรวบรวมและบันทึกความยินยอม

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

ตัวอย่างเช่น วัตถุประสงค์ด้านการตลาดและการวิเคราะห์จะจับคู่กับ Consent Mode ของ Google ดังนี้

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

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

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

ตัวอย่างพิกเซลของเมตาที่กำหนดเอง

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