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

เพิ่มโค้ดฐาน

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

1. จากส่วนผู้ดูแลระบบ Shopify ให้คลิกร้านค้าออนไลน์แล้วเลือกธีม​
2. ไปยังธีมที่คุณต้องการแก้ไขแล้วคลิกการดำเนินการ แล้วเลือกแก้ไขโค้ด
3. คลิก theme.liquid
4. เลื่อนจนกว่าจะเห็น </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>
   
5. แทนที่ YOUR_TAG_ID ด้วย ID แท็กที่ไม่ซ้ำของคุณเอง หากต้องการค้นหา ID แท็กที่ไม่ซ้ำนี้ ให้เปิดตัวจัดการโฆษณาบน Pinterest
6. ไปที่ภาพรวมการติดตามคอนเวอร์ชันและดูที่ส่วนรายละเอียด
7. คัดลอกตัวเลข 13 หลักด้านล่าง ID แท็ก และวางแทน YOUR_TAG_ID ในโค้ด

เพิ่มเหตุการณ์ Checkout

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

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

   {{% 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 %}
3. แทนที่ YOUR_TAG_ID ด้วย ID แท็กที่ไม่ซ้ำของคุณเอง หากต้องการค้นหา ID แท็กที่ไม่ซ้ำนี้ ให้เปิดตัวจัดการโฆษณาบน Pinterest

เพิ่มเหตุการณ์ AddToCart (ไม่บังคับ)

หลังจากที่ติดตั้งโค้ดฐานแล้ว คุณสามารถเลือกเพิ่มเหตุการณ์ต่างๆ เพื่อรวบรวมข้อมูลเพิ่มเติมได้ คุณสามารถเพิ่มเหตุการณ์ AddToCart เพื่อติดตามเมื่อมีคนเพิ่มสินค้าลงในตะกร้าสินค้า

หมายเหตุ: คุณอาจไม่สามารถเพิ่มเหตุการณ์ AddToCart หากใช้ธีมและวิดเจ็ต Shopify บางรายการ

1. จากส่วนผู้ดูแลระบบ Shopify คลิกร้านค้าออนไลน์ และเลือกธีม
2. ในธีมที่คุณกำลังใช้อยู่ปัจจุบัน คลิก การดำเนินการ และ แก้ไขโค้ด
3. ในส่วนแม่แบบ ให้ค้นหาไฟล์โค้ดที่ชื่อ product.liquid product-template.liquid หรือ product-form.liquid แล้วเปิดขึ้นมา โปรดทราบว่าไฟล์นี้อาจแตกต่างกันไปตามธีมที่คุณติดตั้ง แต่ส่วนใหญ่แล้วคุณจะเห็นโค้ดปุ่มเพิ่มไปยังรถเข็นในไฟล์ products.liquid หรือไฟล์ที่เทียบเท่า
4. ค้นหา addtocart ในไฟล์โค้ด
5. วางโค้ดต่อไปนี้ไว้ในเครื่องหมายคาเร็ตปิดขององค์ประกอบ <button> หรือ <input>

   onclick="pintrk('track', 'addtocart');"
6. คลิกบันทึกที่มุมขวาบน

หากคุณติดตั้งแท็ก Pinterest ด้วยตนเองแล้วและตอนนี้ต้องการใช้แอป Pinterest for Shopify แทน คุณควรลบแท็กที่ติดตั้งด้วยตนเองออกก่อน ตรวจสอบให้แน่ใจว่าได้ลบโค้ดฐาน โค้ดการชำระเงิน และโค้ด addtocart

ลบโค้ดฐาน

1. จากส่วนผู้ดูแลระบบใน Shopify ให้คลิกร้านค้าออนไลน์แล้วเลือกธีม​
2. ไปยังธีมที่คุณต้องการแก้ไขแล้วคลิกการดำเนินการ แล้วเลือกแก้ไขโค้ด
3. คลิก theme.liquid
4. เลื่อนไปจนกว่าคุณจะเห็น </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

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

   {{% 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

1. จากส่วนผู้ดูแลระบบ Shopify ให้คลิกร้านค้าออนไลน์แล้วเลือกธีม​
2. ในธีมที่คุณกำลังใช้อยู่ปัจจุบัน คลิกการดำเนินการ จากนั้นแก้ไขโค้ด
3. ในส่วนแม่แบบ ให้หาไฟล์โค้ดที่ชื่อ product.liquid หรือ product-template.liquid หรือ product-form.liquid แล้วเปิดขึ้นมา โปรดทราบว่าไฟล์นี้อาจแตกต่างกันไปตามธีมที่คุณติดตั้ง แต่ส่วนใหญ่แล้วคุณจะเห็นโค้ดปุ่มเพิ่มไปยังรถเข็นในไฟล์ products.liquid หรือไฟล์ที่เทียบเท่า
4. ค้นหาสำหรับ addtocart ในไฟล์
5. ค้นหาและลบโค้ดต่อไปนี้ โค้ดควรอยู่ที่เครื่องหมายคาเร็ตปิดของ <button> หรือ <input>:

   onclick="pintrk('track', 'addtocart');"
   

6. คลิกบันทึกที่มุมขวาบน