Google タグマネージャーを導入して、計測やマーケティングの為にクリックイベントをトラッキングしてみます。
Contents
Google タグマネージャー
Google タグマネージャーは、Google のサービスで管理ツールからの設定でタグを追加、編集したりすることができます。
アカウント作成
下記項目からアカウントを設定します。
- アカウント名
- 国
コンテナ作成
次にコンテナを設定します。
- コンテナ名
- コンテナの使用場所
コンテナの使用場所は「ウェブ」「iOS」「Android」「AMP」から選択します。
利用規約にチェックすると、Google タグマネージャーのコードが表示されます。（後でも表示できます）
インストール（コード設置）
設置するコードですが、初回のコンテナ作成時に表示されますが、下記からも確認できます。
「管理」からコンテナ画面の「Google タグマネージャをインストール」を選択します。
javascript タグと javascript が無効用に noscript タグがあります。
javascript タグを header 内に、noscript タグを body 直下に設置します。
タグ作成
コンテナを作成したらタグを作成していきます。
「新しいタグ」から下記を設定していきます。
- タグ名
- タグの設定
- トリガー
タグ名
任意の名称を記入します。
タグの設定
タグタイプから目的にあったタイプを選択します。今回は「ユニバーサルアナリティクス」を選択します。
トラッキングタイプに「イベント」を選択します。
イベントでは下記を設定します。
- カテゴリ
- アクション
- ラベル
- 値
- 非インタラクションヒット
- Google アナリティクス設定
- トラッキング ID
カテゴリには任意の値「click_event」、アクションには変数から Page Path を選択して「{{Page Path}}」、ラベルには変数からClick URL を選択して「{{Click URL}}」、値には「１」、非インタラクションヒットには「真」を設定します。また、「{{Click Text}} : {{Click URL}}」のように複数設定することも可能です。
非インタラクションヒット
真
- 遷移とみなさない
- 直帰とみなさない
- 直帰率に影響しない
- 外部リンクは直帰となる
偽
- 遷移とみなす
- 直帰とみなす
- 直帰率に影響する
- 外部リンクは直帰とならない
Google アナリティクスと連動する為、「このタグでオーバーライド設定を有効にする」を有効にして「トラッキング ID」に UA- から始まるアナリティクスのトラッキング ID を設定します。
トリガー
下記項目からイベント発生時のトリガーを設定します。
- トリガーの種類
- このトリガーの発生場所
- イベント発生時にこれらすべての条件が true の場合にこのトリガーを配信します
「トリガーの選択」 - 「トリガーの設定」から「トリガーのタイプを選択」します。
今回は任意のリンクのみ計測する為、「リンクのみ」を選択します。
「このトリガーの発生場所」で「一部のリンククリック」を選択して条件を設定します。
下記は特定の任意クラス名があるリンクをクリックしたときがトリガーとなります。
「Click Classes」「含む」「任意のクラス名」
設定したら保存します。
プレビュー
プレビューで公開する前にテストすることが出来ます。
上部メニューにある「プレビュー」ボタンをクリックするとプレビュー中のワークスペース名が表示され、プレビュー中であることがわかります。
プレビュー中に同じブラウザで対象のサイトを表示すると下部にプレビューツールが表示されるようになります。リンクを押すとイベントとトリガーが動作しているかの確認がリアルタイムにチェックできます。
確認が終わったら、Google タグマネージャーの管理画面に戻りプレビューを終了します。
公開
プレビューで確認ができたら、上部メニューにある「公開」ボタンをクリックします。「バージョン名」や「バージョンの説明」を記入して、サイド「公開」ボタンをクリックします。さらに、コンテナのバージョンに関する「名前」「説明」を記入します。最後に「続行」をクリックすると公開が完了します。
まとめ
最初に設置すれば、イベント設定の変更や追加などがソースを修正することなく管理画面からできるようになりますので、便利です。また、バージョン管理が出来ますので、元に戻したり変更した部分の差分を確認することもできるようになります。