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

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

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

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

การเตรียมโค้ดพิกเซลจากภายนอก

บริการจากภายนอกที่คุณร่วมงานด้วยจะมอบโค้ดที่ผสานการทำงานกับพิกเซลให้แก่คุณ โดยพิกเซลมักมีส่วนประกอบอยู่ 2 อย่าง ได้แก่ 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);

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

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

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

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

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

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

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

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

เพิ่มพิกเซลแบบกำหนดเอง

ก่อนที่จะเพิ่มพิกเซลแบบกำหนดเอง ให้ลบพิกเซลที่มีอยู่ออกเพื่อให้แน่ใจว่าระบบไม่ได้นับเหตุการณ์ของลูกค้าสองครั้ง โดยคุณควรลบโค้ดพิกเซลที่มีอยู่ออกจากที่ที่พิกเซลนั้นอยู่ด้วยตนเอง เช่น theme.liquid checkout.liquid (ผู้ขายของ Plus เท่านั้น) และในสคริปต์การชำระเงินอื่นๆ

  1. จากส่วน Shopify admin ให้ไปที่การตั้งค่า > เหตุการณ์ของลูกค้า
  2. ตั้งชื่อพิกเซลของคุณให้มีเอกลักษณ์ หากคุณป้อนชื่อพิกเซลแบบกำหนดเองที่มีอยู่แล้ว ระบบจะเตือนให้คุณตั้งชื่อพิกเซลของตัวเองด้วยชื่ออื่น
  3. คลิก “เพิ่มพิกเซล” เพื่อเปิดเครื่องมือแก้ไขเหตุการณ์
  4. วางพิกเซล JavaScript จากภายนอกลงในหน้าต่างโค้ด
  5. เพิ่มเหตุการณ์ที่คุณต้องการติดตามในโครงร่างที่เหมาะสม
  6. ตัวเลือกเสริม: คลิก “การดำเนินการเพิ่มเติม” เพื่อแก้ไขชื่อพิกเซลของคุณหรือดูข้อมูลเกี่ยวกับการจ้างผู้เชี่ยวชาญของ Shopify เพื่อรับความช่วยเหลือเกี่ยวกับพิกเซลแบบกำหนดเอง
  7. คลิก “บันทึก” เพื่อบันทึกพิกเซลแบบกำหนดเองของคุณ หากพร้อมที่จะเชื่อมต่อพิกเซลแบบกำหนดเองของคุณแล้ว คุณสามารถคลิก “เชื่อมต่อพิกเซล” เพื่อเริ่มติดตามเหตุการณ์ของคุณ

เชื่อมต่อพิกเซลแบบกำหนดเอง

เมื่อเพิ่มพิกเซลแบบกำหนดเองแล้ว คุณต้องเชื่อมต่อพิกเซลกับร้านค้าของคุณ

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

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

พิกเซล 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');
fbq('init', YOUR_PIXEL_ID);

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

การยกเลิกการเชื่อมต่อพิกเซลแบบกำหนดเอง

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

ขั้นตอน:

  1. จากหน้าเหตุการณ์ของลูกค้าใน Shopify admin ของคุณ ให้คลิกที่ “พิกเซลแบบกำหนดเอง
  2. ระบบจะแสดงพิกเซลแบบกำหนดเองที่เชื่อมต่ออยู่ในขณะนี้ที่ด้านบนของรายการพิกเซลแบบกำหนดเองของคุณ คลิก “ยกเลิกการเชื่อมต่อ” ในบรรทัดพิกเซลแบบกำหนดเองที่ต้องการ การยกเลิกการเชื่อมต่อพิกเซลจะไม่ได้ลบพิกเซลด้วยแต่อย่างใด

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

คุณสามารถลบพิกเซลแบบกำหนดเองที่คุณไม่ต้องการอีกต่อไปได้

ขั้นตอน:

  1. จากหน้าเหตุการณ์ของลูกค้าใน Shopify admin ของคุณ ให้คลิกที่ “พิกเซลแบบกำหนดเอง
  2. คลิกปุ่ม “...” ในบรรทัดพิกเซลแบบกำหนดเองที่ต้องการ
  3. คลิกที่ “ลบ” ยืนยันการลบ แล้วระบบจะลบพิกเซลแบบกำหนดเองออกจากตัวจัดการพิกเซล

การลบพิกเซลแบบกำหนดเองนั้นไม่สามารถเลิกทําได้ ดังนั้น โปรดตรวจสอบให้แน่ใจว่าคุณลบพิกเซลที่ต้องการจริงๆ

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

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