このブログもようやく記事数が170記事まで溜まってきて、いっぱしのブロガー気取りのちえちゃんです。どうもどうも。
今日は自分のサイトから、外部のページのリンクをクリックした際の計測をするための設定を紹介したいと思います！！
目次
GTM（googleタグマネージャー ）で外部リンククリックの計測方法！アナリティクスでの見え方はこんな感じ
ゴールはこんな感じ。アナリティクスのコンバージョンの目標設定を行います。
するとどのページで外部リンクがクリックされたのか計測してくれます。
GTM（googleタグマネージャー ）で外部リンククリックの計測の設定準備
それでは外部リンククリックを計測するための手順を説明していきまる！！
ちなみにわたしは参考サイトなど見て行ったのですが、なぜかクリックではなく、ページビューすべてがイベントとして計測されてしまってうまくいかなかったので；；
計測するために、すべての外部リンクに特定のclass名を付与してあげることにしました！！
サイトにGTM（Google Tag Manager）のタグを張り付けて読み込ませる
Google Tag Managerのサイトにアクセスします。
グーグルタグマネージャー
Googleアカウントでログインします。
そして「アカウントを作成」をクリックしてアカウントを登録していきます。
アカウント作成とは、サイト登録というような意味合いになりますよ～
指示に従って、アカウント名と国を入力します。
「アカウント名」はサイト名など好きな名前でよいでしょう
「コンテナ名」はサイトのURLを入れ、コンテナの使用場所はサイトの場合「ウェブ」をクリックしましょう。
すると右側からするんと利用規約のテキストが出てくるので、「はい」をクリックして同意します。
するとタグマネージャーの機能を起動するためのタグをサイトにうめこんでね！！という内容がポップアップででてきます！！
指示通り、コードをサイトに埋め込みます。
サイトの外部サイトをクリックしたときに特定のclass名を付与する設定をする
jqueryに外部リンクをクリックしたときに自動的に付与される記述を追記します。
$("a[href]").each(function() {
if (!this.href.match(new RegExp("^(#|\/|(https?:\/\/" + location.hostname + "))"))) {
// 別ウィンドウで開く.
$(this).attr("target", "_blank");
// external というクラスを付けておき, CSS でアイコンを付ける.
$(this).addClass("external");
}
});
jqueryって聞くと難しそうに感じるかもしれませんか、有料テーマなど使っている人はだいたいのテーマのjqueryに必要なものコードが読み込まれているので、footer部分に上記のコードを追記すれば起動するかと思います！！
「external」のclass名を設定するというスクリプトになるので、違うclass名を付けたい人はこの部分を変更してください。
自分で設定している方は、jqueryをCDN経由で読み込みましょう。
自分でjqueryを読み込むときはうえの「$(“a[href]”).each(function() {～」よりも前で読み込む必要があるので気を付けてくださいね～
設定しおわったら、外部リンクを「要素の検証」でclassが付与されているか確認しましょう。
GTM（googleタグマネージャー ）で外部リンククリックの計測の設定
それでは準備ができたのでGTM（googleタグマネージャー ）で引き続き設定を行っていきます。
「タグ」と「トリガー」を設定していきますよ。
GTM（googleタグマネージャー ）でトリガーを設定します。
①まずサイドバーから「トリガー」をクリックします。
②するとにゅるんと右側からウィンドウが出てくるので、「トリガーの設定」をクリックします。
③するとさらににゅるんと右側からウィンドウがでてくるので、そこから「リンクのみ」をクリックする
その後の設定は上記の画像と同じように設定してください。
④「タグの配信を待つ」のチェックボックスにチェックを入れる
⑤「これらすべての条件が true の場合にこのトリガーを有効化」の部分を変更する
「Page URL」、「正規表現に一致」を選択します。そして一番右側の小窓には「.*」を入力しておきます。
「.*」←これはすべてという意味になるよ。
⑥「このトリガーの発生場所」を「一部のリンククリック」を選択する
⑦「イベント発生時にこれらすべての条件が true の場合にこのトリガーを配信します」を設定します。
「Click URL」「含まない」を選択して、一番右側の小窓には自分のサイトのURLを入れておきます。
すると自分のサイトののURL以外ということになるので、内部リンクは除外されるということになります。
↑普通ならこれで計測できるはずなのですが、なぜかできなかった；；
のでそのあとにも設定します。
⑧さらに特定のclassが付与されているリンクのみ、というのを指定していきます。
「Click Classes」「含む」を選択、一番右側の小窓には「external」を入れておきます。
これは先ほどの設定(jqueryでの設定）で自分が指定したclass名を入れてください。
これでトリガーの設定は完了です。
右上の保存ボタンを押して保存しておきましょう。
GTM（googleタグマネージャー ）でタグを設定します。
①トリガーと同じく「タグ」を選択して新規追加していきます。
②「タグの設定」を選択します。
③右からでてくるウィンドウで「アナリティクス」を選択します。
④「トラッキングタイプ」で「イベント」を選択する
⑤イベントトラッキングパラメータのカテゴリに「外部リンク」、アクションに「クリック」と入力します。
↑これは後でアナリティクスでの設定に使用していきます。
⑥非インタラクション ヒット「真」にします。
※これ重要です！！参考サイトを見て「偽」にしていたのですが、すると、直帰率が10パーセントとかに急激に下がったので、おかしくなってしまっていました。
そのため「真」にするのが重要ですよぉ～！
⑦「Google アナリティクス設定 」でアナリティクスの設定をする
ここをクリックすると「{{Google アナリティクス設定}}」という項目がでてくるので、それを選択します。
するとまたウィンドウがでてくるので、自分のサイトのアナリティクスのトラッキングIDを入力します。
「UA-000000-00」みたいなやつです
完了したら保存してください。
⑧このタグを実行するトリガーを選択していきます。
下のほうにある「トリガーを選択してこのタグを配信」という項目をクリックします。
⑨先ほど、登録したトリガー「リンクのみ」（保存するときに名前変えた人はそのトリガーです）を選択
これでタグの設定は完了です。
右上の保存ボタンを押して保存しましょう！！
GTM（googleタグマネージャー ）で先ほど行った設定を公開する
タグマネージャーでは設定しただけでは動きません。
かならず右上のバーにある、「公開」ボタンを押して、設定したものを公開してください。
何か聞いてきますが、これは公開時のログをメモしてくれる。という意味合いなので、自分のわかりやすいように、設定して「公開」をクリックしてください。
これでGTM側での設定は完了です。
アナリティクスでのコンバージョン目標の設定手順
それではコンバージョンの設定を行います。
①サイドバーから「管理」をクリックします
②「目標」をクリックする
③「新しい目標」をクリックして新しい目標を追加します。
④現状だとテンプレートになっているので、下にある「カスタム」を選択します。
カスタムを選択したら、「続行」ボタンを押してね。
⑤名前とイベント選択します。
名前は自分のわかりやすいようにつけてください。今回の計測の通り「外部リンククリック」としました。
そしてタイプは「イベント」を選択しておきます。
⑥イベント条件の詳細設定
それでは先ほどのGTM（googleタグマネージャー ）でおこなった、イベントトラッキングパラメータを入力していきます。
↑さきほどのはこんな感じたったので、同じように入力します。
カテゴリに「外部リンク」、アクションに「クリック」と入力します。
⑦コンバージョンの目標値としてイベント値を使用を「はい」にしておきます
これでアナリティクスの設定は完了。
すべての設定手順が完了しました！！
これで外部リンクをクリックされた時を計測できるようになりました～！！！
ばいちゃ
コメント