Google タグマネージャーでホームページのアクセス解析を行う方法

今回はGoogle タグマネージャーを使ってホームページのアクセス解析を行う方法について説明します。Google タグマネージャーと連携することで、Google アナリティクスだけでは実現できない以下のような計測が可能になります。

• サイト内のボタンをクリックした際のイベントを計測する
• サイトに埋め込まれている動画が再生されたことを計測する
• サイトがどれくらいスクロールされたかを計測する
• サイトへの滞在時間を計測する

ここではサイト内にコンテンツのダウンロードボタンを設置したと仮定して、どれくらいダウンロードが行われたかを計測することにします。

タグマネージャーの概要については、公式サイトをご覧ください。

Google タグマネージャーとの連携はビジネスプラン以上で利用することができます。

Google アナリティクスのプロパティを作成する

Google タグマネージャーで取得したデータはGoogle アナリティクスで参照することになるので、あらかじめGoogle アナリティクス（GA4）のプロパティを作成しておきます。

Google アナリティクスの初期設定についての詳細は省略します。公式サイトを参考にしてください。

新しいプロパティを作成します。

作成が完了すると、ウェブストリームの詳細ページに測定ID（例：G-XXXXXXXXXX）が表示されます。測定IDはあとで使用します。

Google アナリティクスの設定は他には特に何もすることはありません。続いてGoogle タグマネージャーの設定に移ります。

タグマネージャーのアカウントを作成する

Google タグマネージャーにログインして、アカウントを作成します。アカウントと同時にコンテナも作成されます。すでにアカウントがある場合はコンテナのみ作成することもできます。

クローバ PAGEで公開しているサイトのURLを入力します。ターゲットプラットフォームは「ウェブ」を選択してください。

コンテナの作成が完了するとインストールするためのコードが表示されますが、×ボタンを押して閉じます。

タグマネージャーのメイン画面が表示されます。メニューにGTM-XXXXというIDが表示されているので、この値をクローバ PAGE に設定します。

クローバ PAGE のサイト管理から「高度な設定」>「詳細設定」を開きます。Google タグマネージャーの設定欄に、先ほどのコンテナIDを入力します。Google アナリティクスとの連携はタグマネージャーから行いますので、Google Analyticsの設定には何も設定しないでください。

トリガーを設定する

タグマネージャーの左メニューから「トリガー」をクリックします。トリガーを新規作成して、以下のように設定します。

さらに、発生条件としてClick ElementのCSSセレクターが一致する要素がクリックされた場合とします。要素のCSSセレクターはブラウザーの開発者ツールなどで確認してください。例えば、ボタンパーツの場合は、ボタンのIDが#button-5とすると、ボタン要素のCSSセレクターは「#button-5 a」となります。

タグを設定する

次に左メニューから「タグ」をクリックして、タグを新規作成します。ここでは２種類のタグを設定します。ひとつはページビューを計測するためのタグで、もう１つはダウンロードボタンのクリックを計測するためのタグです。

ダウンロードボタンのクリックを測定するタグを設定します。

GA4用のタグを新規作成したため、次のようなタグも自動生成されています。これはページビューの測定用に使用します。

ここまで保存してタグマネージャーの画面右上にある「プレビュー」を押すと、タグが正常に動いているかどうかを確認することができます。プレビューの状態で計測対象のサイトにアクセスすると、各種情報を確認することができます。

プレビュー画面でダウンロードボタンをクリックして、ダウンロードタグが配信されることを確認してください。

プレビューで確認したら、いよいよ設定を公開します。「公開」ボタンをクリックしてください。

ダウンロードボタンをクリックしてから、Googleアナリティクスの「リアルタイムの概要」で確認すると、Googleアナリティクスにもイベントが送信されていることがわかります。

終わりに

Google タグマネージャーを使うと、GA4やクローバ PAGEの基本機能だけでは取得できない、ユーザーの行動をさらに詳しく解析することができるようになります。特にクローバ PAGE をランディングページとして使われている方には、サイトの効果測定に有効なのでぜひ活用してみてください。