Googleタグマネージャ「初期設定と外部リンククリック測定の手順」 ~ ブログパフォーマンス向上のためのガイド ~
記事のリニューアルに伴い、ページをこちらに移転いたしました。ご了承ください。
Google Tag Manager icon by Icons8
- リニューアルしたメニューの効果測定
- 効果測定の準備
- データの確認
- 【初期設定 編】まとめ
- 外部リンクを取得する
- プレビューモードでテスト
- 取得データを閲覧
- まとめと感想
【初期設定 編】
【外部リンク 編】
初心者向け
Googleタグマネージャの活用方法
初期設定と使い方
～ ブログのパフォーマンス向上。Googleタグマネージャの初期設定／外部リンクのクリック測定 ～
【初期設定 編】
イベントトラッキングを設定することで、Googleアナリティクスのデフォルト設定では見ることができないデータの計測が可能になり、アクセス解析の幅が広がります。
リニューアルしたメニューの効果測定
サイトがスマートフォンや幅の狭い画面に対応する際、一般的な手法として、ボトムナビゲーションを導入することがあります。このようなレスポンシブ対応を行うことで、ユーザーは画面下部に配置されたナビゲーションメニューを利用することで、シームレスな操作が可能になります。
これにより、ユーザーはコンテンツをスクロールしながらも、指の届きやすい位置にナビゲーションが配置されているため、使いやすさが向上します。
ボトムナビゲーションとは、下の画像のような画面下に固定されたナビゲーションメニューです。
スマホでよく見かけるデザインですね。
メニューデザイン・機能を一新したことによる、ユーザー体験（UX）の向上やSEOへの効果を検証するには、Googleタグマネージャのイベントトラッキングがたいへん役に立ちます。
以下は検証の指標例です。
-
メニューをわかりやすくして、次のアクションに結びつくか？
（回遊率・直帰率の改善） -
メニューのどこが押されているのか？
（イベントトラッキングによる人気ボタン調査） -
そもそもメニューは使ってもらえているのか？
（ぜんぜん押されていなければ、ちょっと悲しい・・ですね）
このうち、直帰率・滞在時間などはGoogleアナリティクスの[オーディエンス] などから見ることができますが、メニューのどのボタンがクリックされたのかは、そのままでは数値が計上されません。
計測するには、イベントトラッキングを使います。
イベントトラッキングとは
イベントトラッキングはGoogleアナリティクスの[行動 > イベント] で見ることができますが、数値を見るには設定が必要です。
イベントトラッキングを設定することにより、Googleアナリティクスのデフォルト設定では計測できない、ユーザーの行動を計測できるようになります。
今回の場合だと、スマホ表示用に設置したボトムナビゲーションの各ボタンがどれくらい押されたのかを知るために、イベントトラッキングを設定します。
イベントトラッキングはGoogleタグマネージャ（GTM）を使えば、それほど工数をかけずに設定できます。
以下にまとめましたので、一緒に見ていきましょう。
※以下の設定は はてなブログでの利用を前提としていますが、ワードプレスなどほかのブログやホームページなどでも、ほぼ変わりありません。
また、Googleアナリティクスを利用していることが前提となります。
効果測定の準備
おおまかな流れとしては、このようになります。
- Googleタグマネージャを設置
- イベントトラッキングを設定
まずはGoogleタグマネージャにログインし、初期設定を完了させましょう。
Googleタグマネージャの設置方法
①Googleタグマネージャにログイン
Googleタグマネージャの公式サイトへ行き、ログインします。
②アカウントを新規作成
ログイン後、アカウントを作成します。アカウント名はあとで変更できます。
③コンテナの設定
そのまま下に行き、コンテナの設定をします。
一つのアカウントで複数のコンテナが設定できます。
サイトのタグはコンテナ単位で管理しますので、コンテナ名はサイト（ブログ）名などにすると管理がしやすいかと思います。
わかりやすい名前をつけたら、その下の[ターゲット プラットフォーム] はブログやホームページの場合[ウェブ] を選択します。
[作成] をクリックすると、アカウントが作成されます。
すると下記のウィンドウが開きます。
はてなブログではコードを直接貼り付ける必要がないので、右上の [ × ] を押してウィンドウを閉じてください。
通常はこちらのコードをコピーして、ワードプレスなら[外観 > テーマエディター]
から<head>内、<body>内にそれぞれを貼り付ける必要があります。
その場合、この次のコンテナIDの貼り付けは不要です。
また、ワードプレスにはコンテナIDを利用してかんたんに設定できるプラグインもあります。
④コンテナIDをコピー
「GTM-」ではじまる GTM-XXXXXXX という11文字のIDをコピーします。
コンテナIDは、コンテナを作成すると発行されます。
⑤はてなブログに貼り付け
はてなブログ側の設定は、コピーしたコンテナIDを貼り付けるだけです。
管理画面の詳細設定に追加する場所があります。
[設定 > 詳細設定 > 解析ツール > Google タグマネージャ]
貼り付けたら、下の[変更する] をわすれずに！
これで、Googleタグマネージャが使えるようになりました。
イベントトラッキングの設定
つづいて、イベントトラッキングを設定します。
[変数] → [タグ] → [トリガー]
の順に設定していきます。
①変数を設定
まずは変数を設定します。下記の手順で進めてください。
- 左のサイドメニューから[変数] をクリック
- [ユーザー定義変数 > 新規] をクリック
-
[変数の設定] の右上にある「」マークをクリック
- [変数タイプを選択] から、[定数] を選択
すると、下記の画面になります。
- 一番上は[変数名] です。つぎのタグの設定時に選択しますので、わかりやすい名前をつけてください。
- [値] の部分には、GoogleアナリティクスのトラッキングIDを入力します。
「UA-」ではじまる UA-XXXXXXXXXX-X というコードです。
変数名・変数のタイプ・値の入力を終えたら、右上の[保存] を押してください。
②タグを設定
つぎにタグを設定します。下記の手順で進めてください。
- 左のサイドメニューから[タグ] をクリック
- [タグ > 新規] をクリック
-
[タグの設定] の右上にある「」マークをクリック
- [タグタイプを選択] から、[Google アナリティクス: ユニバーサル アナリティクス] を選択
すると、下記の画面になります。
- [トラッキング タイプ] は[イベント] を選択してください。
- [カテゴリ] は任意でわかりやすい名前をつけてください。
-
[アクション]
の部分には、クリック数を計測するボタン（リンク）につけるクラス名を任意で指定してください。ここでいうクラス名((クラス（class）について
HTMLの編集で class="XXXX" とクラスを指定すると、CSSコードでデザインを適用したり、今回の場合だとクリックなどのイベントを発生させるキーにすることができます。
))とは、HTMLのこの部分です。
クラス名は自由につけられます。クラス名をつけると、ついていないものや、他のクラス名のものと区別ができるようになり、目印の役割をします。
<a class="menu-btn" href="https://XXXXXXXX… - [このタグでオーバーライド設定を有効にする] にチェックします。
-
[トラッキング ID] は右にある
マークのアイコンをクリックし、[変数を選択] からさきほど設定した変数名を選択してください。
[ラベル]、[値]、[非インタラクション ヒット]、[Google アナリティクス設定] はデフォルトのままでだいじょうぶです。
カテゴリ名、アクション名はGoogleアナリティクスに表示されますので、あとで見てわかりやすい名称がよいかと思います。とくにアクション名（クラス名）は、ほかのクラス名とかぶらないように注意してください。
一番上はタグ名です。任意のわかりやすい名前をつけてください。
すべての入力を終えたら、右上の[保存]
を押してください。
③トリガーを設定
トリガーを設定すれば、Googleタグマネージャの設定は終了です。下記の手順で進めてください。
- 左のサイドメニューから[トリガー] をクリック
- [トリガー > 新規] をクリック
-
[トリガーの設定] の右上にある「」マークをクリック
- [トリガーのタイプを選択] から、[クリック > すべての要素] を選択
- [このトリガーの発生場所 > 一部のクリック] を選択
すると、下記の画面になります。
- 一番上は[トリガー名] です。任意のわかりやすい名前をつけてください。
-
[イベント発生時にこれらすべての条件が true
の場合にこのトリガーを配信します]
イベントの発生条件を入力します。ここに指定したすべての条件がそろったとき、データが計上されます。
[Click Element]、[CSS セレクタに一致する] を選択して、②のタグの設定で指定したクラス名（例：menu-btn）を入力してください。
※これにより、クラスをつけたリンクやボタンが押されたとき、数値がカウントされるようになります。
入力を終えたら、右上の[保存] を押してください。
つづけて右上の「公開」を押して、タグを公開すれば、Googleタグマネージャの設定は完了です。
④HTMLを編集
②のタグの設定、③のトリガーの設定で指定したクラスを、計測するリンクボタンに追加します。
前回の投稿で設置したボトムナビゲーションのコードの場合だと、管理画面の[デザイン
> カスタマイズ > ヘッダ > タイトル下]
にあるので、そこに追加します。
ボトムナビゲーションの実装
以下を参考に、リンクが指定されている <a href="… の「a」と「href」のあいだに、「 class="クラス名（例：menu-btn）"」を追加してください。
<a href="ホームのURL"> <i class="XXXX"></i> <br> <span class="mini-text">ホーム</span> </a>
<a class="menu-btn" href="ホームのURL"> <i class="XXXX"></i> <br> <span class="mini-text">ホーム</span> </a>
追加後、[変更を保存] します。
メニューのリンクに、クラスを設定しました。
これで、イベントトラッキングの設定は終了です。お疲れさまでした！
データの確認
効果測定の準備ができたので、データがちゃんと取れているか、確認しましょう。
Googleアナリティクスの[リアルタイム > イベント]
を開き、イベントトラッキングを設定したボタンやリンクをクリックしてみてください。
正しく設定ができていれば、数値がカウントされ、
- [イベント カテゴリ] の欄にはタグの設定でつけたカテゴリ名が、
- [イベント アクション] の欄にはタグの設定でつけたアクション名が、
それぞれ表示されるはずです。
クリックの内訳を知るには
蓄積されたデータはGoogleアナリティクスの[行動 > イベント]
から閲覧できます。
さらにクリックの内訳を見るには、下記の操作を行います。
- [行動 > イベント > 概要] からイベント カテゴリの列に表示されたカテゴリ名をクリック
- [プライマリディメンション:] の列から[行動 > ページタイトル] をクリック
これで、クリックされたボタンの「合計イベント数（クリック数）」が、リンク先のページタイトル別に表示されます。
【初期設定 編】まとめ
以上ここまで、Googleタグマネージャを利用したイベントトラッキングの、初期設定方法のご紹介でした。
イベントトラッキングを設定することで、より高度なアクセス解析が可能になります。
Googleタグマネージャは、設定もかんたんで、タグの管理もしやすいので、これを読んで興味を持たれた方は、ぜひ導入を検討してみてください。
また、前回設定したボトムナビゲーションには、ツイッターのフォローページへのリンクボタンがあり、これは、外部へのリンクです。
外部サイトリンクのクリック数をGoogleアナリティクスで計測するには、今回とは別の設定が必要になります。
正しい検証のためには、こちらの設定も行わないといけません。(^^;
長くなりましたが引き続き、以下で行っていきたいと、思います。
外部リンクのイベントを設定することで、ブログに貼った参考リンクや、アフィリエイトなどのクリックが計測可能になりますので、こちらも興味があればぜひ、このままお付き合いください(„◕᎑◕„)⸝⸝꙳ｸﾞｯ
初心者向け
Googleタグマネージャの使い方
外部リンクへのクリックを設定
～ ブログのパフォーマンス向上。Googleタグマネージャの初期設定／外部リンクのクリック測定 ～
【外部リンク 編】
Googleアナリティクスのデフォルト設定では、外部サイトへのリンクは計測できません。
計測するにはイベントトラッキングの設定が必要となりますが、Googleタグマネージャを使えばかんたんに設定ができます。
外部リンクを取得する
【初期設定 編】では、スマホ画面用に設置したボトムナビゲーション [ 画像 ] の効果を見るため、Googleタグマネージャを利用してイベントトラッキングの設定をしました。
引き続き、この【外部リンク 編】では、外部へのリンクのクリックを設定します。
外部へのリンクのクリックは、ページの遷移をともなわない行動のため、Googleアナリティクスのデフォルトの設定のままでは計測ができません。
外部へのリンクのクリックは、たとえばブログの場合だと、
- ソーシャルボタン
- 記事に貼った参考サイトへのリンク
- アフィリエイト
- お問い合わせ（Googleフォーム）
などがあるかと思います。これらのボタンやリンクがどれだけ押されたか、Googleタグマネージャを使えばかんたんな設定で計測できるようになります。
イベントトラッキングの設定
ここから、外部リンクのイベントトラッキングを設定します。[変数] → [トリガー] → [タグ] の順に設定していきます。
①変数の設定
まず変数を設定します。Googleタグマネージャにログイン後、下記の操作をおこなって下さい。
- 左のサイドメニューから[変数] をクリック
- [組み込み変数 > 設定] をクリック
- [組み込み変数の設定 > クリック] の、すべてにチェック
- [×] ボタンで閉じる
以上で変数の設定は終わりです。
②トリガーの設定
つぎにトリガーを設定します。下記の手順で進めてください。
- 左のサイドメニューから[トリガー] をクリック
- [トリガー > 新規] をクリック
-
[トリガーの設定] の右上にある[] マークをクリック
- [トリガーのタイプを選択] から、[クリック > リンクのみ] を選択
- [タグの配信を待つ] にチェック ※[待ち時間の上限] は、デフォルトのままで大丈夫です。
すると、下記の画面になります。
-
[これらすべての条件が true の場合にこのトリガーを有効化]→これは、トリガーを有効化する条件を指定します。
[Page URL]、[正規表現に一致] をプルダウンから選択し、値の欄に「.*」を入力してください。※正規表現を「.*」にすることにより、すべてのURLが条件にあてはまります。
正規表現とは -
[このトリガーの発生場所] は[一部のリンククリック] を選択してください。
その下の条件で、[Click URL]、[含まない] をプルダウンから選択し、値の欄に自分のサイト（ブログ）のドメイン((ドメインとは、トップページのURLから「http://」を外したこの部分です。このブログだと「rubirubi.hateblo.jp」がドメインになります。))を入力します。
トリガーの有効化条件にすべてのリンクを指定し、その下の発生条件で自サイト（ブログ）内の内部リンクを除外しています。つまり、「すべてのリンクURL－自サイトのURL＝外部リンクURL」という考えかたです。
左上のトリガー名は、つぎのタグの設定時に選択しますので、任意のわかりやすい名前をつけてください。
すべての入力を終えたら、右上の[保存]
を押してください。
③タグの設定
最後にタグを設定します。下記の手順で進めてください。
- 左のサイドメニューから[タグ] をクリック
- [タグ > 新規] をクリック
-
[タグの設定] の右上にある[] マークをクリック
- [タグタイプを選択] から、[Google アナリティクス: ユニバーサル アナリティクス] を選択
すると、下記の画面になります。※タテに長いので、画像を三分割しています。
- 一番上は[タグ名] です。任意のわかりやすい名前をつけてください。
- [トラッキング タイプ] は[イベント] を選択してください。
- [カテゴリ] は任意でわかりやすい名前をつけてください。
-
[アクション] は右にある
マークのアイコンをクリックし、[変数を選択] から「{{Click URL}}」を選択してください。
-
[ラベル] は右にあるマークのアイコンをクリックし、[変数を選択] から「{{Click Text}}」と「{{Page URL}}」をつづけて選択し、あいだを「:
」（コロンと半角スペース）でつなげてください。((ここで指定した要素は、Googleアナリティクスの[行動
> イベント > イベント ラベル] に表示されます。「:
」をあいだに入れることにより、Googleアナリティクスでデータを見る際、クリックされたリンクのテキスト（Click
Text）とリンクが貼られたページ（Page URL）の区別がつきやすくなります。))
- [このタグでオーバーライド設定を有効にする] にチェックします。
- その下の[トラッキング ID] には、Googleアナリティクスのトラッキング ID((トラッキング IDは、Googleアナリティクスの[管理 > プロパティ > トラッキング情報 > トラッキングコード] から確認できます。「UA-」ではじまる UA-XXXXXXXXXX-X というコードです。))を入力してください。
[値]、[非インタラクション ヒット]、[Google アナリティクス設定] はデフォルトのままでだいじょうぶです。
つづけて下に行き、このタグを配信するトリガー（さきほど設定したもの）を指定すれば、タグの設定は完了です。手順ですが、
- [トリガー] の右にある[] マークをクリック
- [トリガーの選択] から、さきほど保存したトリガー名を選択
- 一番右上の[保存] をクリック
これで、イベントトラッキングの設定が完了しました。
つづけて右上の[公開] を押してタグを公開すれば、イベントトラッキングが開始されます。
※今回は、すでにGoogleタグマネージャの設置が完了していれば、自サイト（ブログ）側の設定はありません。
プレビューモードでテスト
[公開] のとなりにある[プレビュー] をクリックすると、[プレビューモード] に入ります。
プレビューモードでトリガーの発火(fired)をテストして、タグが正常に稼働しているかを確認してみましょう。
プレビューモードに入った状態で、タグを設定した自サイト（ブログ）を閲覧すると、下記のような画面になります。これは、Googleタグマネージャにログインしているユーザーのブラウザ画面にのみ、表示されます。
発火（稼働）の確認方法
[Summary] の、
- [Tags Fired On This Page] のところにあるのが、現在のページで発火（稼働）しているタグで、
- [Tags Not Fired On This Page] が発火（稼働）していないタグです。
上の画像のように、外部へのリンクをクリックしたとき、さきほど設定した外部リンクへのタグ名が[Tags
Not Fired On This Page] から[Tags Fired On This Page]
へ移動すれば、タグが正常に稼働している状態です。
もし、正常な稼働が確認できないときは、トリガーの設定でおこなった条件指定などを見直してみてください。
取得データを閲覧
プレビューモードでのテストも終わり、タグの稼働が確認できました。つぎは、取得データを見てみましょう。
Googleアナリティクスの[リアルタイム > イベント] を開き、外部リンクへのボタンやテキストをクリックしてみてください。
それぞれ表示されるはずです。
[タグの設定 > アクション] で「{{Click URL}}」と指定したため、[イベント アクション] の欄にはクリックされたURL（外部リンクへのURL）が表示されています。
クリックの内訳を知るには
蓄積されたデータはGoogleアナリティクスの[行動 > イベント] から閲覧できます。
さらに[概要] の[上位イベント]
からイベントラベルをクリックで選択すると、[イベント ラベル]
の欄にテキストとページURLがつながって表示されます。※データが蓄積されている場合。
[タグの設定 > ラベル] で「{{Click Text}}: {{Page URL}}」と指定したため、[イベント ラベル] の欄に表示されるのはクリックされたリンクのテキスト: そのリンクが貼られているページのURLとなります。
その右にある[合計イベント数] がクリックされた回数にあたります。
自分のアクセスを除外する
アクセス解析の際、Googleアナリティクスで正しい数値を見るためには、自分自身のアクセスを除外する必要があります。
除外する方法はいくつかありますが、個人的にはプラグイン（拡張機能）を使う方法が、かんたんでおすすめです。
Googleアナリティクスの[管理 > すべてのフィルタ] からIPアドレスを指定する方法もありますが、WiFiなど、IPアドレスが変わってしまう環境の場合、そのたびに設定を追加・変更しなければならないので、手間がかかってめんどうです。
Google Analytics オプトアウト アドオン (by Google) - Chrome ウェブストア ※クローム以外にもIE、Firefoxなどほとんどのブラウザに対応しています。
オプトアウト アドオンなら、一度ブラウザにインストールするだけでそのブラウザからの接続を除外することができ、オンオフの切り替えもかんたんなので、イベントトラッキングの確認などテストの際にも便利です。
デメリットは、スマホには対応していないので、スマホも除外したい場合には、CookieやIPアドレスを利用した方法などを使う必要があります。
ローカルストレージを利用した方法
こちらの方法はまだ試していないのですが、最初に設定さえしてしまえばIPアドレスのように変更の手間がかからず、かつスマホでも使えるようです。
Googleアナリティクスで自分を除外する最善の方法はこれ！もう悩まない！
トラッキング コードを直接編集するのですが、手順通りにやればむずかしくはなさそうです。スマホも除外したいかたは、試してみてもよいかと思います。
【外部リンク 編】まとめ
検証結果についても、わたしのブログのすくない数字（なので、読んでいただいているかたには本当に感謝しています!!(*^_^*)）なりに、ある程度データがたまったところで、いつかご報告できればと思います。
- 回遊率・直帰率の改善
- グローバルメニューの利用について
Webサイトの改善に、アクセス解析は大切だと思うのですが、イベントなどのこまかい設定に関しては、どちらかというとあまり皆、やりたがらないような気もします。
わたしのいた職場などではそうでした
笑。
ただ、ブログなど自分のサイトの数字はだれでも気になると思います。
イベントを設定することで、分析の幅が広がります。
Googleタグマネージャはそういった設定や管理の負担をやわらげてくれるので、興味を持たれた方はぜひぜひ！、使ってみてください。
コメント
コメントを投稿