はてブpocketWebサイト運営で欠かせないのがアクセス解析です。Googleアナリティクスで解析されている方も多いと思います。「サイトの回遊率あげたいんだけどどうすれば?」そんなとき、Googleタグマネージャを使えば、リンククリックを個別に計測することができます。リンク、ボタン、バナーのクリックを個別に計測できますし、同じリンクURLでも別として計測することも可能です。イベントの計測と言えば従来は、HTMLソースに以下の内容を埋め込むことが主流でした。'1')">この方法は、あらゆるリンクに設定が必要、管理が大変、などデメリットが多いです。それを解消してくれるのがGoogleタグマネージャを使う方法です。かんたんなステップで設定できます。難しいJavaScriptを書く必要もなく、方法によってはソースをまったく修正せずに対応できます。それでは順に説明していきます。てっとり早く設定方法が知りたい方は、目次から初期設定(変数設定)のところから読み進めてください。本記事では以下3つのクリックイベント計測方法について説明します。特定CSSセレクタのリンクを計測それぞれにメリット、デメリットがあります。かんたんに説明します。サイト内全てのリンクを計測これが一番かんたんな方法です。サイト内すべてのリンククリックが計測できます。ソースを修正する必要がない。【デメリット】サイト内に複数箇所ある同じリンク内容(例、グローバルナビとサイドバーに同じメニューがある等)のどれがクリックされたか判別できない。当サイトの場合、グローバルナビとサイドバーに同じメニューを設置しており、例えば、WordPressをクリックされた場合、どちらをクリックされたのか判別できません。特定CSSクラスを含むリンクHTMLソースにCSSクラスを設定する方法です。計測したい要素ごとに分類することができます。【メリット】クラス名を判別したいリンクごとに分類することで、ページ内のどの要素がクリックされたか判別できる。クラス名のルールをga_としておくことで、トリガーはひとつだけ作成すればよくなる。(トリガーについてはのちほど説明します。)例、ga_nav,ga_sidebarなどクラス指定し、ga_を含むという条件で指定できる。【デメリット】HTMLソースにCSSクラスを設定する必要がある。クリックされた要素の判別にクラス名を使う場合、別のクラスが同時に設定されているとそれも出力される。WordPressなどで、動的に生成される要素でクラスを設定するのがむずかしい場合に使えない。当サイトの大半のリンクはこの方法でクリックイベントを計測しています。特定CSSセレクタのリンクCSSセレクタでリンクを指定する方法です。専用のCSSを用意することなく、計測したい要素ごとに分類することができます。作成済みのHTMLソースやCSSクラスが利用できるので、ソースを修正する必要がない。aといった指定ができるので、動的生成要素などで、直接CSSクラスを指定できない場合でも対応できる。分類したいリンクごとにトリガーを作成する必要がある。ヘッダー内のリンクとサイドバー内のリンクをひとつのトリガーで設定することはできない。※Googleタグマネージャの仕様で、ひとつのトリガーに複数条件を指定した場合、AND条件になります。OR条件は指定できません。当サイトでは、グローバルナビとサイドバーのカテゴリにて設定しています。(WordPressが動的に生成するソースなので、CSSクラスの設定がかんたんにできないため)前提条件Googleタグマネージャでクリックイベントを計測する前にGoogleアナリティクスの導入Googleタグマネージャの登録が必要です。本記事はGoogleアナリティクスの導入、Googleタグマネージャの登録とコンテナ作成まで済んでいる方が対象です。イベントトラッキング設定の流れGoogleタグマネージャーでイベントを計測設定する基本的な流れは以下の通りです。トリガーを作成するタグを作成するイベントトラッキングとはイベントトラッキングとは、イベント(クリックなどのユーザー行動)を計測することです。計測することでサイト内行動が意図したものとなっているか判断できるようになります。トリガーとはトリガーとは、イベントを計測する要素・条件・タイミングを指定するものです。「リンクをクリックされたときに計測したい」といった内容を設定します。タグとはタグがトリガーの親、あるいは本体と思っていただければいいです。タグとトリガーを紐付けて、タグを配信することでGoogleアナリティクスで計測が開始されます。初期設定(変数設定)個別のイベント計測の前にGoogleタグマネージャの初期設定として、変数設定を済ませましょう。これは一回設定するだけです。コンテナを開いた状態で、左にある変数をクリックします。有効な組み込み変数が表示されるので、ページとクリック欄すべてにチェックを入れましょう。デフォルトでいくつかはチェックが入っていると思います。初期設定ができたらいよいよ、個別に設定していきます。トリガーを設定していきます。リンククリックすべて計測サイト内のすべてのリンククリックを計測する方法です。左メニューからトリガーをクリックし、新規ボタンクリックで作成します。以下の手順で設定します。イベントを選択[クリック]を選択してください。トリガーを設定ターゲット[リンクのみ]を選択してください。その他はデフォルト(チェックが入ったまま)で大丈夫です。URL][正規表現に一致][.*]と入力してください。この指定でサイト内の全ページでリンククリックを計測するようになります。特定のページのみ計測することもできます。Path][/blog]と入力することで、blogディレクトリ配下のみ計測対象になります。配信するタイミング[すべてのクリック]を選択してください。トリガーに名前を付けるトリガーを作成ボタンをクリックすると、名前を入力するダイアログが出てきます。タグを設定するときにこの名前を見て選びます。わかるように名前を付けてください。あとはタグを設定してください。配信するタイミング以外は同じ手順、同じ指定です。特定CSSクラスを含む場合のみ計測する方法です。イベントを選択〜有効化のタイミングまではリンククリックすべて計測と同じです。配信するタイミング[一部のクリック]を選択してください。Classes]を選択し、一致する条件とクラス名を入力してください。私は[先頭が一致][ga_]としています。要素ごとにga_side_popular、ga_side_newなど、CSSクラスを設定しています。[先頭が一致]や[含む]を設定することで、ひとつのトリガーでまとめて設定することができます。各リンククリックを個別に分類するのはタグの設定で行います。CSSセレクタに一致する場合のみ計測CSSセレクタに一致する場合のみ計測する方法です。イベントを選択〜有効化のタイミングまではリンククリックすべて計測と同じです。配信するタイミング[一部のクリック]を選択してください。Element]を選択し、[CSSセレクタに一致する]を選択、CSSセレクタを入力してください。a]と指定しています。セレクタの書き方はまんまCSSセレクタです。各リンククリックを個別に分類するのはタグの設定で行います。タグを設定トリガーが設定できたらタグを設定します。左メニューのタグをクリックし、新規ボタンクリックで作成します。以下の手順で設定します。Analyticsを選択してください。タグの種類を選択ユニバーサルアナリティクスを選択してください。以下の項目を設定します。トラッキングIDトラッキングタイプカテゴリアクションラベル値トラッキングIDGoogleアナリティクスのトラッキングIDを指定します。トラッキングIDはGoogleアナリティクスの管理−トラッキング情報−トラッキングコードにて確認できます。トラッキングタイプ[イベント]を選択します。カテゴリ任意のカテゴリ名を指定します。Googleアナリティクスで参照するときのカテゴリと対応します。カテゴリ→アクション→ラベルの順で親子関係になります。複数のタグを設定する場合、タグ間で同じ名前にしておくと、Googleアナリティクス上で同じ分類になります。例、ヘッダー用タグとサイドバー用タグのカテゴリに[内部リンク]と設定すると、どちらをクリックされても内部リンクとして計測されます。分けたい場合、別の名前にしてください。アクション任意のアクション名を指定します。カテゴリと同じく、複数のタグ間で名前を同じにするか別にするかで管理しやすくなります。例、ヘッダー用タグに[ヘッダークリック]、サイドバー用タグに[サイドバークリック]と設定すると、どちらをクリックされたかすぐにわかります。ラベルラベルを設定します。ラベルの設定で、どのリンクをクリックされたかが判別できます。ラベル指定はいくつかの方法があります。設定したトリガーに応じて指定してください。URL]がわかりやすいです。クリックしたリンクの表示名、リンク先URLと対応します。Text]では取得できないのでご注意ください。Classes]を選択してください。分類したい要素ごとにクラス名を指定しておくことで、どの要素がクリックされたかわかります。URL]でいいと思います。値は半角数字のみ入力可能です。通常は1でいいと思います。1にしておくと、10回クリックされた場合、10と記録されます。配信するタイミング配信するタイミングはクリックを選択します。既存のクリックトリガーから選択ダイアログが出るので、希望のトリガーをチェックし、保存してください。タグを作成ボタンで完成です。あとは公開するだけなのですが、公開する前にテストすることをおすすめします。テスト機能が付いているので、設定したトリガーやタグがちゃんと動いているか確認できます。プレビューとデバッグ画面右上の公開ボタン右にある下向き矢印をクリックします。開いたメニューからプレビューボタンをクリックします。するとブラウザがプレビュー状態となります。この状態でサイトを開き、動作確認してください。プレビュー動作確認方法サイトを開くと、下の方に専用メニューが出てきます。ところに設定したタグが出ているはずです。動作したタグ名が出てきます。クリックする際はCtrlを押しながらクリックし、別タブで開くようにしてください。同じタブで開くと計測する前にページが切り替わって確認できません。計測できた場合、左のSummary欄にgtm.linkClickなどが表示されると思います。それを選択し、右の方のVariablesをクリックすると、クリックしたときに取れる情報が出てきます。ここでタグで設定したラベルがうまく取得できるか確認できます。Textはundefinedになっています。取得できるものを設定しましょう。問題なければ、Googleタグマネージャ画面に戻り、プレビューモードを終了します。問題があった場合、修正して再度テストしてみてください。問題なければいよいよ公開します。公開する画面右上にある公開ボタンをクリックします。ダイアログが表示されるので、今すぐ公開ボタンをクリックすると公開できます。公開したら動作確認をします。Googleタグマネージャーの動作を確認する公開したあと、Googleアナリティクスを開きます。分間)をクリックします。その状態で、自分のスマホなどでサイトにアクセスし、リンクをクリックしてみてください。無事に計測されましたか?計測されたらちゃんと設定されています。計測されない場合、どこかの設定に誤りがあります。プレビューモードで確認済みの場合、タグマネージャの設定は問題ないですが、他のどこかに問題があります。Googleタグマネージャの導入で失敗しているGoogleアナリティクスで自分を除外しているなどが考えられます。ちなみに私は、Googleタグマネージャ導入時のタグを貼り付ける場所を間違えており、正しく動作しませんでした。Googleタグマネージャのコードは<body>開始タグの直後に貼り付けるのですが、<body>開始タグの直前に貼り付けていました。無事計測されましたら、日頃のアクセス解析にて確認しましょう。Googleアナリティクスでイベントを確認するここまでで設定されたタグはGoogleアナリティクスで確認できます。確認する場所は、レポートを開き、行動−イベントとたどると確認できます。イベントの中をそれぞれ確認してみてください。当日中のイベントは反映にタイムラグがある場合があります。まとめ無事設定できましたでしょうか。GoogleアナリティクスのイベントトラッキングにGoogleタグマネージャを利用すると一元管理できて手間がありません。一度設定すれば、イベントのカテゴリ、アクション、ラベルを変更する場合でもソースを触る必要がありません。2015-03-19Amazonで最安値を探すスポンサーリンクこの記事が気に入っていただけたらシェアお願いします。冒頭の窪田さんまとめは外せないとして、鉄板「カグア」さんのブログエントリをはじめ、他にも「でぶてて」さんの記事や「ウェブタタン」さん、「ウェブ部」さんなど、悶絶するくらい参考になります。コメントをキャンセルメールアドレスが公開されることはありません。Web担当者として日々学んだことを書いていきます。