ステップ 0：アプリのインストール
Shopifyのアプリストアから「App Unity Tracking ‑ 広告・GA4計測連携」をインストールします。
ステップ 1: 初期設定
1-1. GoogleタグマネージャーのコンテナID設定
GoogleタグマネージャーのコンテナIDを入力し、「Save」をクリックします。
★ IDが不明な場合は「GoogleタグマネージャーのID確認方法」をご覧ください。
1-2. Web Pixels機能の設定
決済・購入完了ページでのCV計測のために、Shopifyのカスタムピクセルに専用コードを設定します。
手順：
1. 「設定する」をクリックし「お客様イベント」画面に遷移
2.「カスタムピクセルを追加」をクリック
3. ピクセル名（例：「App Unity Tracking用_Web Pixels」）を入力し「保存」
4. 「追加コード」欄に以下のコードを貼り付けて保存 ※追加コードは下記に記載
5. 最後に「連携」をクリック
🔧 追加コード（Web Pixels用）
※ GTM-xxxxxxx の部分にご自身のGTMコンテナIDを入力してください。
// -----------------------------------------------
// チェックアウトページおよびサンクスページにおいて
// Google Tag Manager (GTM) をロードし、購入イベントを計測するコード
// -----------------------------------------------
// URLに "/checkouts/" もしくは "/thank_you/" を含むページでのみ、GTMを読み込み
if (window.location.href.includes("/checkouts/") || window.location.href.includes("/thank_you/")) {
// GTMタグの発火
//「GTM-xxxxxxx」クライアント様のGTMコンテナIDを記入ください。
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxxxxxx');
// データレイヤーを初期化
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
}
// checkout_completedイベントが発生した場合に購入イベントを送信
analytics.subscribe("checkout_completed", async (event) => {
// 商品情報を取得
const items = event.data?.checkout?.lineItems?.map(lineItem => ({
item_id: lineItem.variant.id,
item_name: lineItem.title,
quantity: lineItem.quantity
})) || [];
// ecommerceデータをdataLayerに送信
window.dataLayer.push({
ptm_flag: "true",
event: "purchase",
currency: event.data?.checkout?.currencyCode,
ecommerce: {
event_id: event.id,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
transaction_id: event.data?.checkout?.order?.id,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
items: items
}
});
});
ステップ2: サービス選択
連携したい広告・計測サービスにチェックを入れ、各種IDを入力後「Save」をクリックします。IDの確認方法が分からない場合は、「連携サービス」を確認ください。
★ Yahoo!広告 ディスプレイ&検索広告（コンバージョン）を利用する場合、対応プランの利用(Yahoo!広告 CV計測機能プラン or サーバーサイド計測プラン)が必要です。 「Yahoo! 広告 CV計測機能プラン」の設定ガイドもご参照ください。
ステップ 2.5: サーバーサイド計測の設定 （対象プランの方）
対象プランの方はこちらのステップが設定画面に表示されます。Googleアナリティクス4（GA4）やFacebook広告にチェックを入れた、サーバーサイド計測の設定を行ってください。
参考記事：Measurement Protocol の API Secret を生成する
ステップ3: テーマ選択
1. 「テーマ設定ページ」をクリック
2. App Unity TrackingのトグルをONにして「保存」
3. 「次へ」をクリック
※テーマ変更後は再度このステップの実行が必要です。「テーマ変更時に必要な再設定手順」
ステップ 4: GTM設定ファイルのインポート
1. 「ファイルをダウンロードする」をクリック
2. GTMの管理画面にログインして管理を開く
3. コンテナをインポート」をクリック
4. ダウンロードしたJSONファイルを選択し「既存」を選択
5. 希望のワークスペースを選択 ※Default Workspaceしかない場合は、それを選択します。
6. 「統合」を選択し、「確認」→「公開」
7. 「バージョンの公開と作成」を選択し、「公開」をクリック
8. 「Complete」をクリック
※「コンテナをインポート」が表示されない場合は「GTMで『コンテナをインポート』が表示されない場合の対処法」をご確認ください。
※「バージョンの作成」では本番環境に設定が反映されないため、GTMプレビューモード経由でのみタグが発火します。そのため、バージョンの公開を行い、本番環境に設定を反映する必要があります。
設定完了後のインポート
カスタムピクセルを使用している場合のタグ動作確認は、こちらを確認ください。
計測が始まらない場合は、こちらを確認ください。