この記事ではShopifyでGoogleタグマネージャー(Google Tag Manager, GTM)を10分で設定する方法を2つ紹介します。
Pafit Tag ManagementならGA4や、Facebook広告、Twitter広告などの広告サービスの計測タグの設定も一括で行えるため、設定時間を大幅に短縮することができます。
自動設定:アプリを利用してタグマネージャーを設置する方法
GoogleタグマネージャーをShopifyに導入する際、弊社が提供するShopifyアプリPafit Tag Managementを使う方法もあります。
手動設定の方法では導入後のタグやトリガー、変数の設定は面倒です。
そこで、Shopifyアプリを使うことで、タグマネージャーの導入とタグやトリガー、変数の設定を一括で行うことができます。
例えば、GoogleアナリティクスやGoogle広告、Facebook広告、Yahoo!広告などのタグをそれぞれ設定すると時間が掛かります。また、設定を間違えないように各サービスのドキュメントを見ながら設定するのは面倒です。
弊社が提供しているShopifyアプリのPafit Tag ManagementならGTMの導入とタグやトリガー、変数の設定を一括で行えます。さらにコーディング不要でデータレイヤー(datalayer)の用意も行います。
詳細は以下のページからご確認ください。
手動設定:テーマのコードを編集してタグマネージャーを設定する方法
今回はShopifyテーマ「Dawn」を利用している際のGoogleタグマネージャーの設定方法をご紹介します。その他のテーマをお使いの際も同様に設定できますので、ご安心ください。
ただし、注意点としては関係のないコードを編集しないようにお気をつけください。心配な方は2番目の方法であるShopifyアプリの利用をご検討ください。
それでは、Shopifyのテーマのコードを編集し、Googleタグマネージャーを設定する4つのステップをご紹介します。
- タグマネージャーのアカウントの作成(タグマネージャーのアカウントをお持ちの方は手順2へ)
- タグマネージャーのコンテナの選択
- タグマネージャーのコードをShopifyのテーマ内に貼り付け
- 必要に合わせてタグの設定と公開
手順1: タグマネージャーのアカウントの作成(タグマネージャーのアカウントをお持ちの方は2番へ)
アカウント作成の方法は動画でも確認できます。
Googleタグマネージャーのホームページへ移動し、ログインを完了します。次に「アカウントを作成」を選択します。
次にアカウント名やコンテナ名を入力します。また、ターゲットプラットフォームは「ウェブ」を選択します。最後に作成を選択します。
アカウント名はご自身の会社名や店舗名、コンテナ名はショップのURLを入力してください。その他の情報を入力することもできますが、上記の情報入力をおすすめします。
利用規約を確認の上、「はい」を選択します。
EU圏内向けにサービスや商品を提供している場合はデータ処理規約をご確認の上、チェックを入れるかをご検討ください。
アカウントを新規作成した方は、次は手順3を行います。
手順2: タグマネージャーのコンテナの選択
アカウントをすでにお持ちの方はGoogleタグマネージャーのすべてのアカウントの画面で既存のコンテナを使うか、新しいコンテナを作成するか選択します。
画面右上の「GTM-XXXXX」を選択します。
手順3: タグマネージャーのコードをShopifyのテーマ内に貼り付け
タグマネージャーのコードをShopifyのテーマ内に貼り付ける方法は動画でも確認できます。
「テーマ」→「アクション」→「コードを編集する」を選択します。
合計3箇所に貼り付ける必要がありますので、1箇所ずつ説明します。
1箇所目:theme.liquidの<head>内上部に追加
ピンク枠で囲まれたアイコンをクリックし、タグマネージャーのコードをコピーします。
theme.liquidの <head> 内のなるべく上のほうに貼り付けます。
今回利用しているテーマ「Dawn」では、9行目の下に貼り付けました。
2箇所目:theme.liquidの<body>直下に追加
ピンク枠で囲まれたアイコンをクリックし、タグマネージャーのコードをコピーします。
theme.liquidの <body> タグの直下に貼り付けます。
3箇所目:チェックアウト設定の追加スクリプトに設定
最後にチェックアウトページの追加スクリプトにもタグマネージャーを導入します。(注文完了ページでコンバージョンなどの広告タグを利用するための作業になります。)
ピンク枠で囲まれたアイコンをクリックし、タグマネージャーのコードをコピーします。
「設定」→「チェックアウト」を選択します。
ページ下部の「追加スクリプト」の「注文状況ページ」に貼り付けます。
手順4: 必要に合わせてタグの設定と公開
以上で作業は完了となります。