ハテブカスタム

はてなブログ初心者によるブログ初心者のためのブログ

Googleタグマネージャの使い方。外部リンクへのクリックを設定

\この記事をシェア!/

Googleタグマネージャの使い方。外部リンクへのクリックを設定

Googleアナリティクスのデフォルト設定では、外部サイトへのリンクは計測できません。
計測するにはイベントトラッキングの設定が必要となりますが、Googleタグマネージャを使えばかんたんに設定ができます。

  

外部リンクを取得する

前回の投稿では、スマホ画面用に設置したボトムナビゲーション(画像)の効果を見るため、Googleタグマネージャを利用してイベントトラッキングの設定をしました。
イベントトラッキングとは

今回はひきつづき、外部へのリンクのクリックを設定します。

外部へのリンクのクリックは、ページの遷移をともなわない行動のため、Googleアナリティクスのデフォルトの設定のままでは計測ができません。

外部へのリンクのクリックは、たとえばブログの場合だと、

  • ソーシャルボタン
  • 記事に貼った参考サイトへのリンク
  • アフィリエイト
  • お問い合わせ(Googleフォーム)

などがあるかと思います。これらのボタンやリンクがどれだけ押されたか、Googleタグマネージャを使えばかんたんな設定で計測できるようになります。

 

イベントトラッキングの設定

Googleタグマネージャの初期設定についてはこちらを参考になさってください。
Googleタグマネージャの設置方法

ここからは、外部リンクのイベントトラッキングを設定します。[変数] → [トリガー] → [タグ] の順に設定していきます。

image

 

①変数の設定

まず変数を設定します。Googleタグマネージャにログイン後、下記の操作をおこなって下さい。

  1. 左のサイドメニューから[変数] をクリック
  2. [組み込み変数 > 設定] をクリック
  3. [組み込み変数の設定 > クリック] の、すべてにチェック
  4. [×] ボタンで閉じる

image

 

以上で変数の設定は終わりです。

 

②トリガーの設定

つぎにトリガーを設定します。下記の手順で進めてください。

  1. 左のサイドメニューから[トリガー] をクリック
  2. [トリガー > 新規] をクリック
  3. [トリガーの設定] の右上にある[] マークをクリック
  4. [トリガーのタイプを選択] から、[クリック > リンクのみ] を選択
  5. [タグの配信を待つ] にチェック ※[待ち時間の上限] は、デフォルトのままで大丈夫です。

すると、下記の画面になります。 

トリガーの設定【Googleタグマネージャの使い方】

 

  • [これらすべての条件が true の場合にこのトリガーを有効化]→これは、トリガーを有効化する条件を指定します。
    [Page URL]、[正規表現に一致] をプルダウンから選択し、値の欄に「.*」を入力してください。※正規表現を「.*」にすることにより、すべてのURLが条件にあてはまります。
    正規表現とは
  • [このトリガーの発生場所] は[一部のリンククリック] を選択してください。
    その下の条件で、[Click URL]、[含まない] をプルダウンから選択し、値の欄に自分のサイト(ブログ)のドメイン*1を入力します。

トリガーの有効化条件にすべてのリンクを指定し、その下の発生条件で自サイト(ブログ)内の内部リンクを除外しています。つまり、「すべてのリンクURL-自サイトのURL=外部リンクURL」という考えかたです。

左上のトリガー名は、つぎのタグの設定時に選択しますので、任意のわかりやすい名前をつけてください。 
すべての入力を終えたら、右上の[保存] を押してください。

 

③タグの設定

最後にタグを設定します。下記の手順で進めてください。

  1. 左のサイドメニューから[タグ] をクリック
  2. [タグ > 新規] をクリック
  3. [タグの設定] の右上にある[] マークをクリック
  4. [タグタイプを選択] から、[Google アナリティクス: ユニバーサル アナリティクス] を選択

すると、下記の画面になります。※タテに長いので、画像を三分割しています。

image

  • 一番上は[タグ名] です。任意のわかりやすい名前をつけてください。

image

  • [トラッキング タイプ] は[イベント] を選択してください。
  • [カテゴリ] は任意でわかりやすい名前をつけてください。
  • [アクション] は右にあるGoogleタグマネージャの使い方。外部リンクへのクリックを設定 - ハテブカスタムマークのアイコンをクリックし、[変数を選択] から「{{Click URL}}」を選択してください。
  • [ラベル] は右にあるGoogleタグマネージャの使い方。外部リンクへのクリックを設定 - ハテブカスタムマークのアイコンをクリックし、[変数を選択] から「{{Click Text}}」と「{{Page URL}}」をつづけて選択し、あいだを「: 」(コロンと半角スペース)でつなげてください。*2

image

  • [このタグでオーバーライド設定を有効にする] にチェックします。
  • その下の[トラッキング ID] には、Googleアナリティクスのトラッキング ID*3を入力してください

[値]、[非インタラクション ヒット]、[Google アナリティクス設定] はデフォルトのままでだいじょうぶです。

つづけて下に行き、このタグを配信するトリガー(さきほど設定したもの)を指定すれば、タグの設定は完了です。手順ですが、

  1. [トリガー] の右にある[] マークをクリック
  2. [トリガーの選択] から、さきほど保存したトリガー名を選択
  3. 一番右上の[保存] をクリック

トリガーの選択【Googleタグマネージャの使い方】

 

これで、イベントトラッキングの設定が完了しました。

つづけて右上の[公開] を押してタグを公開すれば、イベントトラッキングが開始されます。

※今回は、すでにGoogleタグマネージャの設置が完了していれば、自サイト(ブログ)側の設定はありません。

 

プレビューモードでテスト

[公開] のとなりにある[プレビュー] をクリックすると、[プレビューモード] に入ります。

プレビューモードでトリガーの発火(fired)をテストして、タグが正常に稼働しているかを確認してみましょう。

プレビューモード中は、下記がタグマネージャの画面に表示されます。左下の[プレビューモードを終了] をクリックすると、プレビューモードが終了します。

image

プレビューモードに入った状態で、タグを設定した自サイト(ブログ)を閲覧すると、下記のような画面になります。これは、Googleタグマネージャにログインしているユーザーのブラウザ画面にのみ、表示されます。

Googleタグマネージャの使い方「プレビューモード」

 

発火(稼働)の確認方法

[Summary] の、

  • [Tags Fired On This Page] のところにあるのが、現在のページで発火(稼働)しているタグで、
  • [Tags Not Fired On This Page] が発火(稼働)していないタグです。

image


上の画像のように、外部へのリンクをクリックしたとき、さきほど設定した外部リンクへのタグ名が[Tags Not Fired On This Page] から[Tags Fired On This Page] へ移動すれば、タグが正常に稼働している状態です。

もし、正常な稼働が確認できないときは、トリガーの設定でおこなった条件指定などを見直してみてください。

 

取得データを閲覧

プレビューモードでのテストも終わり、タグの稼働が確認できました。つぎは、取得データを見てみましょう。
Googleアナリティクスの[リアルタイム > イベント] を開き、外部リンクへのボタンやテキストをクリックしてみてください。

  • [イベント カテゴリ] の欄にはタグの設定 でつけたカテゴリ名が、
  • [イベント アクション] の欄にはリンク先URLが、

それぞれ表示されるはずです。

[タグの設定 > アクション] で「{{Click URL}}」と指定したため、[イベント アクション] の欄にはクリックされたURL(外部リンクへのURL)が表示されています。

 

クリックの内訳を知るには

蓄積されたデータはGoogleアナリティクスの[行動 > イベント] から閲覧できます。
さらに[概要] の[上位イベント] からイベントラベルをクリックで選択すると、[イベント ラベル] の欄にテキストとページURLがつながって表示されます。※データが蓄積されている場合。

[タグの設定  > ラベル] で「{{Click Text}}: {{Page URL}}」と指定したため、[イベント ラベル] の欄に表示されるのはクリックされたリンクのテキスト: そのリンクが貼られているページのURLとなります。

image


その右にある[合計イベント数] がクリックされた回数にあたります。 

 

自分のアクセスを除外する

アクセス解析の際、Googleアナリティクスで正しい数値を見るためには、自分自身のアクセスを除外する必要があります
除外する方法はいくつかありますが、個人的にはプラグイン拡張機能)を使う方法が、かんたんでおすすめです。

Googleアナリティクスの[管理 > すべてのフィルタ] からIPアドレスを指定する方法もありますが、WiFiなど、IPアドレスが変わってしまう環境の場合、そのたびに設定を追加・変更しなければならないので、手間がかかってめんどうです。

 

Google Analytics オプトアウト アドオン (by Google) - Chrome ウェブストア ※クローム以外にもIEFirefoxなどほとんどのブラウザに対応しています。

 

オプトアウト アドオンなら、一度ブラウザにインストールするだけでそのブラウザからの接続を除外することができ、オンオフの切り替えもかんたんなので、イベントトラッキングの確認などテストの際にも便利です。

デメリットは、スマホには対応していないので、スマホも除外したい場合には、CookieIPアドレスを利用した方法などを使う必要があります。 

 

ローカルストレージを利用した方法

こちらの方法はまだ試していないのですが、最初に設定さえしてしまえばIPアドレスのように変更の手間がかからず、かつスマホでも使えるようです。 

 Googleアナリティクスで自分を除外する最善の方法はこれ!もう悩まない! 

ラッキング コードを直接編集するのですが、手順通りにやればむずかしくはなさそうです。スマホも除外したいかたは、試してみてもよいかと思います。

 

まとめと感想

前回 前々回の投稿であげた検証内容も、わたしのブログのすくない数字(なので、読んでいただいているかたには本当に感謝しています!!(*^_^*))なりに、ある程度データがたまったところでご報告できればと思います。

  • 回遊率・直帰率の改善
  • グローバルメニューの利用について

 

Webサイトの改善に、アクセス解析は大切だと思うのですが、イベントなどのこまかい設定に関しては、どちらかというとあまり皆、やりたがらないような気もします。
わたしのいた職場などではそうでした 笑。

ただ、ブログなど自分のサイトの数字はだれでも気になると思います。
イベントを設定することで、分析の幅が広がります。

Googleタグマネージャはそういった設定や管理の負担をやわらげてくれるので、興味を持たれたかたはぜひ、使ってみてください。

 

今日のオススメ 

*1:ドメインとは、トップページのURLから「http://」を外したこの部分です。このブログだと「rubirubi.hateblo.jp」ドメインになります。

*2:ここで指定した要素は、Googleアナリティクスの[行動 > イベント > イベント ラベル] に表示されます。「: 」をあいだに入れることにより、Googleアナリティクスでデータを見る際、クリックされたリンクのテキスト(Click Text)とリンクが貼られたページ(Page URL)の区別がつきやすくなります。

*3:ラッキング IDは、Googleアナリティクスの[管理 > プロパティ > トラッキング情報 > トラッキングコード] から確認できます。「UA-」ではじまる UA-XXXXXXXXXX-X というコードです。