このキャプチャーでは、ShopifyにGoogleTagManagerを設定したいと思います。
Google Tag Managerのメリット
Google Tag Managerを設定するとタグの管理が容易になります。アクセス解析のようなタグを埋める際に1ページずつ設定するのは大変です。GoogleTagManagerはひとつのタグを設定するだけで全ページや条件にあったページだけタグを設定することができます。
また、バージョン管理をすることができます。GoogleTagManager上で編集したタグは、元に戻したり、誰が編集したかなどトラブルが起きたときに簡単に切り戻し作業が出来ます。
GoogleTagManagerにはプレビュー機能があります。タグを設置してすぐに本番に反映する前にプレビュー機能でタグが正常に動作するのか確認することができます。トラブルの回避に大きく役に立ちます。
ShopifyPlusのチェックアウトページ
ShopifyPlusに契約しないとCheckout.liquidを修正できません。チェックアウトページは、コンバージョン情報などを取得するのに重要ですが、このキャプチャーではPlusに加入しません。すべてのページに実装したい場合は、Plusに加入しておいてください。
Google Tag Managerを設定する
- Google Tag Managerにクリックします。
- [アカウント作成]をクリックします。
- 情報を入力します。その後、[作成]をクリックします。
- アカウント名 GooleTagManagerを導入するサイト名を入力します。
- 国 日本を選択します。
- コンテナ名 GoogleTagManagerを導入するサイトのURLを入力します。
- ターゲットプラットフォーム サイトの種類を選択してください。
- データの利用規約です。EUなどではデータの扱いがプライバシーで厳しくなっています。EUなどでビジネスをする際は、内容をご確認の上許可してください。
- サイトに追加するタグが表示されます。
もし表示されない場合は、自分のGTM番号をクリックしてください。
- [オンラインストア],[アクション],[コード編集]の順にクリックします。
- theme.liquidに
<head>用のGTMタグを記述してください。
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>の下に記述します。
- theme.liquidにbodyタグ前のGTMタグも記述してください。
</body>の前に記述します。
動作確認
head用とbody前用のタグを記述したら、Google Tag Managerが動作しているのか確認します。
- Tag Assistant Legacy (by Google)をクリック。
- [chromeに追加]をクリックしてください。
- Google Tag Managerを導入したShopifyのサイトを開いてください。
- サイトを表示した状態で、拡張機能をクリックします。
- [Record]をクリックします。その後サイトをリロードしてください。
- Google Tag Managerが表示されており、緑のアイコンが表示されていれば問題ありません。
