Shopify 用 Pinterest アプリを使用して、Shopify ストアを Pinterest ビジネスアカウントにリンクします。
Shopify ストアと一度にリンクできる Pinterest ビジネスアカウントは 1 つのみです。Shopify ストアが 2 件ある場合は、
すでに Shopify に Pinterest タグを手動で追加している場合、または別のサードパーティを使用してそれを行っている場合は、Shopify 用 Pinterest アプリを使用する前に
Shopify ストアを Pinterest アカウントにリンクする前に、次の操作を行う必要があります。
Shopify ストアを Pinterest アカウントにリンクするためにデスクトップで Chrome ブラウザを使用することをおすすめします。
Shopify に Pinterest タグを手動で追加できますが、おすすめしません。可能な場合は上記の手順に従ってストアを Shopify 用 Pinterest アプリとリンクしてください。タグが自動的に追加されます。
ベースコードを追加する
ベースコードを使用すると、商品を購入したり、ショッピングカートに入れるなど、イベントに関するデータを集めることができます。ベースコードはウェブサイトを全ページにインストールする必要があります。
- 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("説明");t.async=!0,t.src=e;var r=document.getElementsByTagName("説明")[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 の位置に貼り付けます。
Checkout(購入)イベントを追加する
ベースコードをインストールした後、さらにデータを集めるために、他のイベントを追加することができます。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("説明");t.async=!0,t.src=e;var r=document.getElementsByTagName("説明")[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(カートに追加)イベントを追加して、商品をショッピングカートに追加したユーザーをトラッキングすることができます。
注:一部の Shopify テーマとウィジェットでは、AddToCart(カートに追加)イベントを追加することができません。
- Shopify の管理画面で「オンラインストア」「テーマ」の順にクリックします。
- 使用中のテーマで「アクション」「コードを編集」の順にクリックします
- 「テンプレート」から product.liquid、product-template.liquid、または product-form.liquid のいずれかのコードファイルを見つけて開きます。インストールしているテーマごとにファイル名は違いますが、一般的には「カートに追加」ボタンのコードは products.liquid ファイルまたはそれと同等のファイルです。
- コードファイルで「addtocart」のファイルを検索します。
- <button> または <input> エレメントの終了
キャレット 内に次のコードを貼り付けます。onclick="pintrk('track', 'addtocart');"
- 画面右上にある「保存」をクリックします。
Pinterest タグを既に手動でインストールしたが、代わりに Shopify 用 Pinterest アプリを使用したい場合は、まず、手動でインストールしたタグを削除する必要があります。ベースコード、Checkout(購入)コード、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("説明");t.async=!0,t.src=e;var r=document.getElementsByTagName("説明")[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("説明");t.async=!0,t.src=e;var r=document.getElementsByTagName("説明")[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 %}
AddToCart(カートに追加)コードを削除
- Shopify の管理画面で「オンラインストア」「テーマ」の順にクリックします。
- 使用中のテーマで「アクション」「コードを編集」の順にクリックします
- 「テンプレート」の下にある product.liquid、duct-template.liquid、または product-form.liquid のいずれかのコードファイルを見つけて開きます。インストールしているテーマごとにファイル名は違いますが、一般的には「カートに追加」ボタンのコードは products.liquid ファイルまたはそれと同等のファイルです。
- 「addtocart」のファイルを検索します。
- 以下のコードを見つけて削除します。<button> または <input> エレメントの終了キャレットにあります。
onclick="pintrk('track', 'addtocart');"
- 画面右上にある「保存」をクリックします。