ใช้แอป Pinterest for Shopify เพื่อเชื่อมต่อร้านค้า Shopify กับบัญชีธุรกิจ Pinterest ของคุณ
โปรดอย่าลืมว่าคุณสามารถเชื่อมต่อบัญชี Shopify ของคุณกับบัญชีธุรกิจ Pinterest ได้ครั้งละหนึ่งบัญชีเท่านั้น หากคุณมีร้านค้า Shopify 2 ร้าน
หากคุณได้เพิ่มแท็ก Pinterest ลงใน Shopify ด้วยตนเองหรือให้บุคคลที่สามรายอื่นทำให้แล้ว คุณจะต้อง
ก่อนที่จะเชื่อมต่อร้านค้า Shopify กับบัญชี Pinterest ได้ คุณจะต้อง:
คุณควรใช้เบราว์เซอร์ Chrome บนเดสก์ท็อปเพื่อเชื่อมต่อร้านค้า Shopify กับบัญชี Pinterest ของคุณ
แม้ว่าคุณสามารถเพิ่มแท็ก Pinterest ลงใน Shopify ด้วยตนเองได้ แต่เราไม่แนะนําให้ใช้ หากเป็นไปได้ โปรดทําตามขั้นตอนด้านบนเพื่อเชื่อมต่อร้านค้าของคุณกับแอป Pinterest for Shopify เพื่อให้แท็กของคุณถูกเพิ่มโดยอัตโนมัติ
เพิ่มโค้ดฐาน
โค้ดฐานช่วยให้คุณรวบรวมข้อมูลเกี่ยวกับเหตุการณ์ เช่น เวลามีคนซื้อผลิตภัณฑ์หรือเพิ่มผลิตภัณฑ์ในตะกร้าสินค้า คุณต้องติดตั้งโค้ดฐานในทุกหน้าของเว็บไซต์
- จากส่วนผู้ดูแลระบบ Shopify ให้คลิกร้านค้าออนไลน์แล้วเลือกธีม
- ไปยังธีมที่คุณต้องการแก้ไขแล้วคลิกการดำเนินการ แล้วเลือกแก้ไขโค้ด
- คลิก theme.liquid
- เลื่อนจนกว่าจะเห็น </head> และวางโค้ดนี้ไว้เหนือแท็กดังกล่าว
<script type="text/javascript"> !function(e){if(!window.pintrk){window.pintrk=function() {window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var n=window.pintrk;n.queue=[],n.version="3.0";var t=document.createElement("script");t.async=!0,t.src=e;var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}} ("https://s.pinimg.com/ct/core.js"); pintrk('load','YOUR_TAG_ID', { em: '{{ customer.email }}', }); pintrk('page'); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&noscript=1" /> </noscript>
- แทนที่ YOUR_TAG_ID ด้วย ID แท็กที่ไม่ซ้ำของคุณเอง หากต้องการค้นหา ID แท็กที่ไม่ซ้ำนี้ ให้เปิดตัวจัดการโฆษณาบน Pinterest
- ไปที่ภาพรวมการติดตามคอนเวอร์ชันและดูที่ส่วนรายละเอียด
- คัดลอกตัวเลข 13 หลักด้านล่าง ID แท็ก และวางแทน YOUR_TAG_ID ในโค้ด
เพิ่มเหตุการณ์ Checkout
หลังจากติดตั้งโค้ดฐานแล้ว คุณสามารถเพิ่มเหตุการณ์ต่างๆ เพื่อรวบรวมข้อมูลเพิ่มเติมได้ คุณสามารถเพิ่มเหตุการณ์ชำระเงินเพื่อติดตามเมื่อมีผู้ซื้อสินค้าและทำธุรกรรมเสร็จสมบูรณ์ได้
- จากส่วนผู้ดูแลระบบ Shopify ให้คลิกการตั้งค่า และเลือกชำระเงิน
- วางโค้ดติดตามต่อไปนี้ลงในกล่องข้อความด้านล่างสคริปต์หน้าสถานะคำสั่งซื้อ หากมีโค้ดอยู่ในช่องนี้อยู่แล้ว ให้วางโค้ดติดตามต่อจากโค้ดดังกล่าว
{{% if first_time_accessed %}} <script type="text/javascript"> !function(e){{if(!window.pintrk){{window.pintrk=function() {window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var n=window.pintrk;n.queue=[],n.version="3.0";var t=document.createElement("script");t.async=!0,t.src=e;var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}} ("https://s.pinimg.com/ct/core.js"); pintrk('load','YOUR_TAG_ID', { em: '{{ customer.email }}', }); pintrk('page'); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&noscript=1" /> </noscript> <script> pintrk('track', 'checkout',{ value: {{ total_price }} / 100, currency: '{{ currency }}', order_quantity: 2, event_id: '{{ event_id }}', line_items: [ { product_name: '{{ product_name_1 }}', product_id: '{{ product_id_1 }}', product_price: {{ product_price_1 }}, product_quantity: 1 }, { product_name: '{{ product_name_2 }}', product_id: '{{ product_id_2 }}', product_price: {{ product_price_2 }}, product_quantity: 1 }, ], order_id: {{ checkout.order_id }} }); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&event=checkout&noscript=1"/> </noscript> {% endif %}
- แทนที่ YOUR_TAG_ID ด้วย ID แท็กที่ไม่ซ้ำของคุณเอง หากต้องการค้นหา ID แท็กที่ไม่ซ้ำนี้ ให้เปิดตัวจัดการโฆษณาบน Pinterest
เพิ่มเหตุการณ์ AddToCart (ไม่บังคับ)
หลังจากที่ติดตั้งโค้ดฐานแล้ว คุณสามารถเลือกเพิ่มเหตุการณ์ต่างๆ เพื่อรวบรวมข้อมูลเพิ่มเติมได้ คุณสามารถเพิ่มเหตุการณ์ AddToCart เพื่อติดตามเมื่อมีคนเพิ่มสินค้าลงในตะกร้าสินค้า
หมายเหตุ: คุณอาจไม่สามารถเพิ่มเหตุการณ์ AddToCart หากใช้ธีมและวิดเจ็ต Shopify บางรายการ
- จากส่วนผู้ดูแลระบบ Shopify คลิกร้านค้าออนไลน์ และเลือกธีม
- ในธีมที่คุณกำลังใช้อยู่ปัจจุบัน คลิก การดำเนินการ และ แก้ไขโค้ด
- ในส่วนแม่แบบ ให้ค้นหาไฟล์โค้ดที่ชื่อ product.liquid product-template.liquid หรือ product-form.liquid แล้วเปิดขึ้นมา โปรดทราบว่าไฟล์นี้อาจแตกต่างกันไปตามธีมที่คุณติดตั้ง แต่ส่วนใหญ่แล้วคุณจะเห็นโค้ดปุ่มเพิ่มไปยังรถเข็นในไฟล์ products.liquid หรือไฟล์ที่เทียบเท่า
- ค้นหา addtocart ในไฟล์โค้ด
- วางโค้ดต่อไปนี้ไว้ใน
เครื่องหมายคาเร็ต ปิดขององค์ประกอบ <button> หรือ <input>onclick="pintrk('track', 'addtocart');"
- คลิกบันทึกที่มุมขวาบน
หากคุณติดตั้งแท็ก Pinterest ด้วยตนเองแล้วและตอนนี้ต้องการใช้แอป Pinterest for Shopify แทน คุณควรลบแท็กที่ติดตั้งด้วยตนเองออกก่อน ตรวจสอบให้แน่ใจว่าได้ลบโค้ดฐาน โค้ดการชำระเงิน และโค้ด addtocart
ลบโค้ดฐาน
- จากส่วนผู้ดูแลระบบใน Shopify ให้คลิกร้านค้าออนไลน์แล้วเลือกธีม
- ไปยังธีมที่คุณต้องการแก้ไขแล้วคลิกการดำเนินการ แล้วเลือกแก้ไขโค้ด
- คลิก theme.liquid
- เลื่อนไปจนกว่าคุณจะเห็น </head> และพบโค้ดนี้
<script type="text/javascript"> !function(e){if(!window.pintrk){window.pintrk=function() {window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var n=window.pintrk;n.queue=[],n.version="3.0";var t=document.createElement("script");t.async=!0,t.src=e;var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}} ("https://s.pinimg.com/ct/core.js"); pintrk('load','YOUR_TAG_ID', { em: '{{ customer.email }}', }); pintrk('page'); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&noscript=1" /> </noscript>
ลบโค้ด Checkout
- จากส่วนผู้ดูแลระบบ Shopify ให้คลิกการตั้งค่า และเลือกชำระเงิน
- ในส่วนสคริปต์หน้าสถานะคำสั่งซื้อ ค้นหาโค้ดติดตามต่อไปนี้ในกล่องข้อความ หากมีโค้ดอื่นในช่องนี้ด้วย ตรวจสอบให้แน่ใจว่าคุณลบเฉพาะส่วนนี้ของโค้ด:
{{% if first_time_accessed %}} <script type="text/javascript"> !function(e){{if(!window.pintrk){{window.pintrk=function() {window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var n=window.pintrk;n.queue=[],n.version="3.0";var t=document.createElement("script");t.async=!0,t.src=e;var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}} ("https://s.pinimg.com/ct/core.js"); pintrk('load','YOUR_TAG_ID', { em: '{{ customer.email }}', }); pintrk('page'); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&noscript=1" /> </noscript> <script> pintrk('track', 'checkout',{ value: {{ total_price }} / 100, currency: '{{ currency }}', order_quantity: 1, order_id: {{ checkout.id }} }); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&event=checkout&noscript=1"/> </noscript> {% endif %}
ลบโค้ด AddToCart
- จากส่วนผู้ดูแลระบบ Shopify ให้คลิกร้านค้าออนไลน์แล้วเลือกธีม
- ในธีมที่คุณกำลังใช้อยู่ปัจจุบัน คลิกการดำเนินการ จากนั้นแก้ไขโค้ด
- ในส่วนแม่แบบ ให้หาไฟล์โค้ดที่ชื่อ product.liquid หรือ product-template.liquid หรือ product-form.liquid แล้วเปิดขึ้นมา โปรดทราบว่าไฟล์นี้อาจแตกต่างกันไปตามธีมที่คุณติดตั้ง แต่ส่วนใหญ่แล้วคุณจะเห็นโค้ดปุ่มเพิ่มไปยังรถเข็นในไฟล์ products.liquid หรือไฟล์ที่เทียบเท่า
- ค้นหาสำหรับ addtocart ในไฟล์
- ค้นหาและลบโค้ดต่อไปนี้ โค้ดควรอยู่ที่เครื่องหมายคาเร็ตปิดของ <button> หรือ <input>:
onclick="pintrk('track', 'addtocart');"
- คลิกบันทึกที่มุมขวาบน