GA4やGoogleタグの登場などをきっかけに、最近は「Googleタグマネージャー」のキーワードを聞く機会が増えてきました。GA4のタグ周辺に関わる細かなアップデートが増えるようになって、「この機能の挙動を確かめたい」と思うことが増えています。一方で、挙動を確かめるだけの実装を運用中のサイトで行うにはリスクがあったり、手軽に試せるサイトも多くはありません。
そこで今回SEM Technologyでは、Googleタグマネージャーの挙動を気軽に試すことができるサイト「GTM Trial Shop」を開設しました。
Googleタグマネージャーを勉強する上での弊害
Googleタグマネージャーを勉強する上で参照すべき情報は近年増えてきました。例えば、自著であるデジタルマーケターのためのテクノロジー入門もその1つです。
一方で、インプットした情報をアウトプットする場、つまり知識を練習し使える状態にするための環境が少ないのが現状です。「自身のサイトがある人は自身のサイトでやればいい」という考えも一理あります。しかしながら、既に運用中の解析ツールやGoogleタグマネージャーに手を加えることはリスクがあります。さらに、何らかのデータレイヤー変数を追加した状態で確認したい場合、サイト側の改修が必要になり、時間がかかってしまいます。
まとめると、Googleタグマネージャーを実際に試そうとしても、気軽に試すことは難しいと言うことができます。
今回ローンチした「GTM Trial Shop」について
今回ローンチした「GTM Trial Shopは、Googleタグマネージャーを気軽に試すことができるサイトです。このサイトの設定ページにアクセスし、GoogleタグマネージャーのコンテナIDを入力し保存すると、そのコンテナIDがブラウザのローカルストレージに保存され、以降このサイトのページを読み込むと指定したGoogleタグマネージャー・コンテナが読み込まれるようになっています。入力したコンテナIDはブラウザのローカルストレージに保存され利用されるのみなので、このサイトを利用する他のユーザーのことを一切気にする必要はありません。
つまり、Googleタグマネージャーのコンテナを新規に作成し、GTM Trial Shopの設定を行えば、自分だけのGTMテストサイトのできあがりです。
さらに、GTMだけでなくGoogleタグ(旧gtag)にも対応しているため、新しくなったGoogleタグの挙動の確認にも使えます。
ページ構成はECサイトを模したものに
このサイトは、よくあるECサイトをできるだけ模したページ構成となっています。具体的には、
- 商品カテゴリページ
- 検索結果ページ
- 商品詳細ページ
- ショッピングカート(右サイドバーのみ)
- 決済情報入力画面
- 購入完了ページ
といったページが存在します。これらのページは見た目こそは本物のECサイトのようにページが作られていますが、実際には単なる静的サイトとして構築されています。そのため、キャンセル手続きをどうしようかなど考えながらテストする必要はありません。決済情報や配送先情報の入力画面も存在しますが、どのような情報を入力しても次に進むことができるので、手間なくテストを行えます。
一方で、「商品をカートに入れる」操作を行ったとしても、実際にその商品をカートに入れる処理は行っていないため、操作と挙動が一致しないことだけは注意していただく必要があります。
追加のJavaScriptを実行可能に
このサイトの機能では、Googleタグマネージャーをサイトに自動設置できるだけではなく、特定のページに対して追加のJavaScriptコードを実行することができます。例えば、ECサイトの実装を試そうとすると、購入完了ページに対して、トランザクション情報をデータレイヤーで出力した状態でテストしたいケースが多々あります。
このサイトの設定ページの「個別ページ用のJavaScriptコード」からJavaScriptコードを指定すれば、特定のページで指定したJavaScriptを実行することができます。実行のタイミングは、Googleタグマネージャーを読み込む前なので、データレイヤー変数の初期化を行うのに理想的なタイミングと言えます(既にグローバル領域にデータレイヤー変数のみ初期化済みのため、個別にデータレイヤー変数を初期化する必要はありません)。
この機能を使って、購入完了ページや商品詳細ページなどで、個別にデータレイヤー変数を設定するJavaScriptコードを実装してみましょう。ただし、ここでも、このサイトが静的サイトであることを意識する必要があります。つまり、実際に閲覧している商品や購入されている商品に対応する商品情報を自動出力する機能はありませんので、完全に固定値でいれていただく必要があります(逆にこれはテストする上での自由度が高いことも意味しています)。
GTM Trial Shopのサイトマップ
このサイトのページ一覧は、グローバルナビゲーションにある「Pages」の一覧に記載されていますが、本記事執筆時点でのページ一覧を書き出します。
- トップページ
- カテゴリページ
- キーワード検索結果ページ
- お気に入り商品ページ
- 商品詳細ページ
- 決済情報入力ページ
- 購入完了ページ
- ブログ一覧ページ
- ブログ記事ページ
- お問合せフォームページ
- お問合せ完了ページ
- 本サイトについて(静的ページ)
- 設定ページ
まとめ
本プロジェクトがGoogleタグマネージャーなどに関わる多くの方に使っていただけると幸いであり、そのためにもこのサイトを便利と思ってくださった方は、同僚・知人などにも薦めていただけますと幸いです。
また、現時点で必要最低限の機能については揃えているつもりですが、まだまだ追加したいコンテンツは多数あります。この「GTM Trial Shopの開発は、Github上のオープンソースのプロジェクトで開発を行っているので、機能追加のリクエストをGithub Issueで行なっていただけたり、本プロジェクトへのコントリビューションも大歓迎となっているので、ぜひご協力もお願いします。
