通过 Pinterest for Shopify 应用程序将 Shopify 商店关联到 Pinterest 企业帐户。
每次只能使用一个 Pinterest 企业帐户关联 Shopify 商店。如果你拥有两个 Shopify 商店,
如果你已手动将 Pinterest 标签添加到 Shopify,或者已使用其他第三方添加,则必须先
将 Shopify 商店关联到 Pinterest 帐户之前,你需要:
你最好在电脑端使用 Chrome 浏览器,将 Shopify 商店关联到 Pinterest 帐户。
虽然可手动将 Pinterest 标签添加到 Shopify,但我们不建议这样做。如可能,请遵循上述步骤,通过 Pinterest for Shopify 应用程序关联商店,以便实现自动添加标签。
添加基本代码
基本代码允许你收集事件数据,例如用户购买产品或将产品添加到购物车中。基本代码必须安装在你网站的所有页面上。
- 在你的 Shopify 管理员中,点击在线商店,然后点击主题。
- 导航到需编辑的主题,点击操作,然后点击编辑代码
- 点击 theme.liquid。
- 请滚动页面,直到你看到 </head>,然后将以下代码粘贴到 </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 上打开广告管理工具。
- 导航到转化跟踪概述并查找详细信息部分。
- 复制标签 ID 下方的 13 位数字,并将其粘贴到代码中的 YOUR_TAG_ID 位置。
添加结帐事件
安装基本代码后,你可以添加不同的事件来收集其他数据。你可以添加结账事件来跟踪用户购买产品并完成交易的时间。
- 在你的 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 上打开广告管理工具。
添加“添加到购物车”事件(可选)
安装基本代码后,你可以添加不同的事件来收集其他数据(可选)。你可以添加“添加到购物车”事件来跟踪用户将产品添加到购物车的时间。
注意:对于某些 Shopify 主题和微件,你无法添加“添加到购物车”事件。
- 在你的 Shopify 管理员中,点击在线商店,然后点击主题。
- 在当前你正在使用的主题中,单击操作和编辑代码。
- 在模板下,查找名为 product.liquid product-template.liquid 或 product-form.liquid 的代码文件并将其打开。这可能会因你安装的主题而异,但最常见的情况是在 products.liquid 文件或同等文件中看到添加到购物车按钮代码。
- 在代码文件中搜索添加到购物车文件。
- 将以下代码置于 <button> 或 <input> 元素的结尾
插入符号 中:onclick="pintrk('track', 'addtocart');"
- 点击右上角的保存。
如果已手动安装 Pinterest 标签,现在想要使用 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>
移除结账代码
- 在你的 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 | money_without_currency }}, 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 %}
移除“添加到购物车”代码
- 在你的 Shopify 管理员中,点击在线商店,然后点击主题。
- 在你当前使用的主题中,点击操作,然后点击编辑代码。
- 在模板下,查找名为 product.liquid、product-template.liquid 或 product-form.liquid 的代码文件并打开。这可能因你安装的主题而异,但最常见的情况是在 products.liquid 文件或同等文件中看到添加到购物车按钮代码。
- 搜索添加到购物车文件。
- 查找并移除以下代码。其应位于 <button> 或 <input> 元素的结尾插入符号处:
onclick="pintrk('track', 'addtocart');"
- 点击右上角的保存。