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

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

注意

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

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

Shopify による UET の実装

上部のメニューで [ ツール]、[ UET タグ] の順に選択します。

新しい Microsoft Advertising ナビゲーションを使用している場合は、左側のナビゲーションメニューの [コンバージョン] 上でホバーし、 [UET タグ] を選択します。
JavaScript UET タグトラッキングコードをコピーします。
お使いの Shopify アカウントにサインインします。
1. [オンラインストア] > [テーマ] を選択します。
2. [現在のテーマ] で、 [アクション] > [コードの編集] を選択します。
UET タグのインストール。
1. [レイアウト] で、 theme.liquid を選択します。
2. <head > タグのところまで、ページを下にスクロールします。
3. {{ content_for_header }} のすぐ上に UET タグを貼り付けます。
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>

注意

Shopify UET タグが機能していることを検証するには、 UET Tag Helper をダウンロードしてインストールします。 Shopify Web サイトにアクセスし、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 マーチャントセンターにインポートすることができます。