aiship Google Tag ManagerでGA4のeコマース設定を完了する【GTM】

ecsite

ECサイト

投稿日：20250302 更新日：20250302 カテゴリー： ECサイト , Google , ブログ , マーケティング

aiship Google Tag ManagerでGA4のeコマース設定を完了する【GTM】

10年以上UAを触っていた手前、GA4に若干拒否感を感じる今日この頃です。

さて、愚痴はさておき、Google Tag Manage（以下、GTM）でeコマース設定をしていきましょう。つまづいた点も踏まえて、初学者でもクリアできるようにできる限り再現性を高くしてお届けしたいと思います。今回は、クラウド型ショッピングカートaishipでの設定をしていきます。

aishipについて詳しくはこちらをご覧ください。

1 便利なGoogle Tag Manager（GTM）とは
2 GTMタグをサイトに設置する（未設置の場合）
3 Googleタグを設定する
4 変数を登録する
5 eコマースイベントを測定する
6 aishipのECサイト上に購入完了タグを設置する
7 サービスの詳しいお見積り/ご相談/お問い合わせ

便利なGoogle Tag Manager（GTM）とは

GTMは、すべてのタグをコード編集なしに管理できます。

Googleサービスのタグ管理ソリューションで、無料で利用することができます。HTMLに直接書き込む必要がないため、HTMLの知識がなくても導入することができます。正確には初回導入時のみ、タグをHTMLに埋め込む作業が発生します。その作業のみHTMLを編集しますが、それ以降は管理画面からタグの追加、編集、削除が可能になります。

GTMタグをサイトに設置する（未設置の場合）

GoogleTagManager（GTM）にログインします。

GTMへのログインはこちらから

右上の「アカウントを作成」ボタンをクリックします。
GTMは、コンテナを複数個持つことができます。このコンテナは、1サイト1コンテナという認識で問題ありません。弊社の場合は、クライアント先のコンテナを作りWebサイトを複数持って管理しています。

新しいアカウントの追加から「アカウント名」「国」「コンテナ名（URL）」「ターゲットプラットフォーム」を入力します。全て入力したら「作成」をクリックしてください。

そうすると貼り付けるコードが表示されます。

aiship管理画面の左側メニューのサイト管理＞レイアウト作成からhead、dodyそれぞれに貼り付けます。

2023年12月22日のリニューアル以降はGoogle TagManager用のフォームが設置されているのでそこに貼り付けます。

リニューアル詳細はこちらから確認できます。

Googleタグを設定する

はじめにGoogleタグを設定します。

変数を登録する

eコマースの設定を行うためには変数を登録する必要があります。

Google公式ドキュメントには具体的な設定方法が載っていないため、ここでつまづきました。

そうならないように設定内容を全て公開します。

変数のタイプはデータレイヤーの変数で、データレイヤーの変数名を入力します。

以下の変数を作成します。

Ecommerce Items – ecommerce.items
Ecommerce Transaction ID – ecommerce.transaction_id
Ecommerce Value – ecommerce.value
Ecommerce Tax – ecommerce.tax
Ecommerce Shipping – ecommerce.shipping
Ecommerce Currency – ecommerce.currency
Ecommerce Coupon – ecommerce.coupon

eコマースイベントを測定する

https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm

ワークスペースで [タグ] メニューを開きます。
新規のタグを作成します。[タグの設定] ボックスをクリックし、[Google アナリティクス: GA4 イベント] タグを選択します。

測定IDはGA4管理画面の管理＞データの収集と修正＞データストリームから確認できます。

[イベント名] には、組み込み変数（今回はpurchase）を使用します。ここでは、gtag.js API を使って送信された GA4 e コマースイベント名が使用されます。

[詳細設定] > [e コマース] で、[e コマースデータを送信] をオンにします。
[データソース] で [Data Layer]を選択します。

トリガーの設定を行います

トリガーのタイプはカスタムイベント、イベント名はpurchase、すべてのカスタムイベントを選択します。

次に購入完了ページのタグを設定します。

作り方の手順は同じです。

aishipのECサイト上に購入完了タグを設置する

purchaseイベントを計測するためにaishipにて追加の設定が必要になります。

aiship管理画面の集客管理＞アフィリエイト/コンバージョン設定にて登録を行います。

スニペットには以下を貼り付けます。

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "<#受付番号>",
value:"<#商品のみの合計>",
currency:"JPY",
tax:"<#商品合計の税金総額>",
shipping:"<#送料総額>",
coupon:"<#クーポンID>",
items: [
<#繰返始>
{ item_name: "<#商品名>",
item_id: '<#商品管理番号>',
item_category: '<#商品カテゴリ1>',
item_category2: '<#商品カテゴリ2>',
item_category3: '<#商品カテゴリ3>',
item_category4: '<#商品カテゴリ4>',
item_category5: '<#商品カテゴリ5>',
price: <#商品単価>,
quantity: <#商品数量>
},<#繰返終>]
} });
</script>

その他の設定項目は以下のように設定します。

登録名：任意
有効/無効：有効
コンバージョンポイント：購入完了画面
方式：SCRIPT方式
設置タグ：headタグ

以上でeコーマースイベントの設定は完了です。お疲れ様でした。

aishipでは他に商品詳細ページとカートページにタグを設置することができます。　

詳しくはこちらをご確認ください。

aishipではpurchase、view_cart、view_itemの３つのイベントに対応しています。

少し設定は複雑なもののGTMを活用することで、ユーザーの動向を確認できるようになります。

頑張って設定しましょう。

今後の追加イベントがあればまた記事で紹介したいと思います。

弊社では、aishipを利用したECサイト構築の相談を受け付けております。

お気軽にご相談ください。

サービスの詳しいお見積り/ご相談/お問い合わせ

お客様のニーズにお応えするためにさまざまなパターンをご用意しております。
お見積もり/ご相談/お問い合わせは以下のフォームに必要事項をご入力の上ご連絡ください。
担当者より折り返しご連絡させていただきます。

お名前 (必須)
会社名 (必須)
役職名
住所 (必須)
メールアドレス (必須)
電話番号 (必須)
ASP利用	ASPを利用したいECパッケージを利用したいその他
目的1	新規リニューアル
リニューアル予定のURL	リニューアルの場合のみ
目的2 (必須)	顧客育成SEO対策その他
月商目標	100万円まで300万円まで500万円までそれ以上
予算 (必須)	50万円まで100万円まで300万円までそれ以上
題目 (必須)
本文 (必須)
弊社をどこで知りましたか？	キーワード検索広告紹介その他
どんなキーワードで検索しましたか？