Shopify を使用して UET タグを設定する

Shopify で Web サイトを構築した場合は、この記事を読んで UET タグを設定する方法を学習してください。

注意

この記事では、Shopify を使用した UET タグの基本設定方法について説明しています。詳細については、「Shopify Help Center」を参照してください。
Microsoft Advertising は、Shopify のプロセスやドキュメントについても、Shopify のプロセスやドキュメントに加えられた変更についても責任を負いません。
Shopify用のMicrosoft Advertisingアプリをインストールすることにより、UET タグが自動的に作成され、Web サイトの各ページに追加されます。アプリのインストールに移動し、指示に従ってShopify 用のMicrosoft Advertisingアプリを設定してください。

Shopifyを使用して、Web サイトを作成し管理している場合は、そこで UET タグを追加して管理できます。

Shopifyによる UET の実装

Microsoft Advertisingで、[ツール] > [UET タグ] を選択し、JavaScript の UET タグトラッキングコードをコピーします。
お使いのShopifyアカウントにサインインします。
1. [オンラインストア] > [テーマ]を選択します。
2. [現在のテーマ]で、[アクション] > [コードの編集] を選択します。
UET タグのインストール
1. [レイアウト] で、theme.liquid を選択します。
2. <head >タグのところまで、ページを下にスクロールします。
3. UET タグを{{content_for_header}} のすぐ上に貼り付けます。
4. [保存] を選択します。
オンラインチェックアウトプロセスをカスタマイズします。
1. 左側のメニューの下部から、[設定] を選択します。
2. [チェックアウト] を選択します。
3. [追加のスクリプト] フィールドまで下にスクロールします。UET タグを[追加のスクリプト] に貼り付けます。
4. [保存] を選択します。

変動収益を報告する場合は、前の手順で貼り付けた UET トラッキングコードの下に次のコードスニペットのうちの 1 つを追加します。

税金と送料を除外する場合は、次のコードを使用してください。

<script>
   window.uetq = window.uetq || []; 
   window.uetq.push('event', '', { 'revenue_value': {{ subtotal_price | money_without_currency }}, 'currency': '{{ shop.currency }}' }); 
</script>

税金と送料を含める場合は、次のコードを使用してください。

<script>
   window.uetq = window.uetq || []; 
   window.uetq.push('event', '', { 'revenue_value': {{ total_price | money_without_currency }}, 'currency': '{{ shop.currency }}' }); 
</script>

注意

ShopifyUET タグが機能していることを確認するには、UET タグヘルパーをダウンロードして、インストールします。ShopifyWeb サイトにアクセスして、UET イベントが受信され、タグ ID が手順 1 で選択したタグと一致することを確認します。

Shopifyを用いて、動的リマーケティング用に UET タグを変更する方法

Shopifyで、[オンラインストア] > [カスタマイズ] に移動します。
[テーマアクションの省略記号] を選択し、[コードの編集] を選択します。
[テンプレート] で、index.liquid を見つけます。

一般訪問者用にはこのコードを使用します:

<script>
  var productList = []; 
  {% for product in collections.frontpage.products %}
    productList.push({{ product.id }}); 
  {% endfor %}
  window.uetq = window.uetq || [];
  window.uetq.push('event', '', {'ecomm_prodid': productList, 'ecomm_pagetype': 'home'});   
</script>

[保存] を選択します。
[テンプレート] で、search.liquid を見つけます。

商品を検索したユーザー用にはこのコードを使用します:

<script>
  var productList = []; 
  {% for item in search.results %}
    {% if item.object_type == 'product' %}
      productList.push({{ item.id }});
    {% endif %}
  {% endfor %}
  window.uetq = window.uetq || [];
  window.uetq.push('event', '', {'ecomm_prodid': productList, 'ecomm_pagetype': 'searchresults'});   
</script>

[保存] を選択します。
[テンプレート] で、product.liquid を見つけます。

商品を閲覧したユーザー用にはこのコードを使用します:

<script>
  window.uetq = window.uetq || [];
  window.uetq.push('event', '', {'ecomm_prodid': '{{product.id}}', 'ecomm_pagetype': 'product'});
</script>

[保存] を選択します。
[テンプレート] で、cart.liquid を見つけます。

ショッピングカートを放棄したユーザー用にはこのコードを使用します:

<script>
  var productList = [];
  {% for line in cart.items %}
    productList.push({{ line.product_id}});
  {% endfor %}
  window.uetq = window.uetq || [];
  window.uetq.push('event', '', {'ecomm_prodid': productList, 'ecomm_pagetype': 'cart'});
</script>

[保存] を選択します。
[設定] に移動し、[チェックアウト] を選択します。
[注文処理] で、[追加のスクリプト] テキストボックスを見つけます。

過去の購入者用にはこのコードを使用します:

<script>
  var productList = [];
  {% for line in checkout.line_items %}
    productList.push({{ line.product_id }});
  {% endfor %}
  window.uetq = window.uetq || [];
  window.uetq.push('event', '', {'ecomm_prodid': productList, 'ecomm_pagetype': 'purchase'});
</script>

[保存] を選択します。

重要

Shopifyの商品 ID は、の商品フィードの ID と一致する必要があります。
Shopifyは、商品の商品 ID を自動的に作成します。フィード管理ソリューションをShopify商品 ID で更新するようにShopifyを構成して、さらにMicrosoft マーチャントセンターにインポートすることができます。