楽天モバイルスマートフォン用の表示で見るスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。読み込み中・・・こんにちは、なにごとも検証しないと気が済まないNAEです。実際どれくらい使われてますかね?こうするといいよ、という耳より情報にのっかって入れてはみたものの、きちんと効果測定せずにほったらかしてませんか?もしくは、何か効果があったとして、その要因がきちんと分析できていますか?そのお手伝いをするツールが、Googleタグマネージャーです。最近このブログにも導入し、そのすごさを実感しています。全部数字でわかるってすごいですよ。そこで今回は、GoogleタグマネージャーとGoogleアナリティクスによるクリックトラッキングの導入方法を紹介したいと思います。分析の実例:ページ別パーツ別のクリック数GoogleタグマネージャーとGoogleアナリティクスは仮説検証ツールGoogleタグマネージャーの導入〜Googleアナリティクスで分析するまでの設定方法アフィリエイトリンク側の準備Googleタグマネージャーにアカウント登録するGoogleタグマネージャー側でタグ、トリガーを設定するタグを定義するトリガーを定義するプレビューモードで動作テストする公開し、座して待つクリック測定したいパーツがあったらGoogleタグマネージャーを入れてみようまとめ:Googleタグマネージャーで手探りの改善から脱却しようGoogleタグマネージャーとはGoogleタグマネージャーとは、Webページ上でのユーザの動きを検知するためのツールです。Googleタグマネージャーを使うと、Webページ上にあるボタンやリンク等のパーツにセンサーのようなものを埋めこむことができます。そのセンサーによって、Webページが表示された後にユーザがどのような動きをしたのかをつぶさに測定することができます。ボタンがクリックされたURLへのリンクがクリックされた画像がクリックされたなど、クリック系のものをはじめ、多くの動きを検知可能です。このような「イベント」を検知するセンサーを「タグ」と呼んでいます。タグの実体はユーザの動きをトラッキングするための短いJavaScriptコードです。これまでは、Webページの中のトラッキングしたい箇所(リンク等)にタグを手動で埋め込む必要がありました。Googleタグマネージャーを使うと、Webページ側に手を入れることなくタグを自動で埋め込むことができるようになります。具体的には、CSSのセレクタやリンク先のドメインなど、さまざまな条件を使ってタグの埋め込み先を指定することができます。Googleタグマネージャーはタグをどこに埋めこむかどのような「イベント」を検知させるか検知したイベントをどこに知らせるかを一括管理できる便利なシステムなんです。Googleタグマネージャーを使うと結局なにが嬉しいの?そんなGoogleタグマネージャー、Googleアナリティクスを組み合わせるとものすごい力を発揮します。言うと、GoogleタグマネージャーによりWebサイトにセンサー(タグ)を埋め込みセンサー(タグ)がユーザの動きを捉えてGoogleアナリティクスへ送りGoogleアナリティクスで様々な角度から柔軟に分析するといった感じで、Webサイト上でのユーザの動きを定量的に把握・見える化できるのです。分析の実例:パーツ毎のクリック数といってもイメージが湧きにくいと思うので、実物を見てみましょう。先日、本ブログにGoogleタグマネージャーを導入し、Googleアナリティクスと連携させました。ブログのパーツごとのクリック数をトラッキングしています。そのレポートがこちら。パーツごとにクリック数が取られていることがおわかりでしょうか。(パーツの名称は自分でつけることができます)このようなデータから、category-list(記事下のカテゴリ一覧)やglobal-menu(タイトル下のグローバルメニュー)は意外とクリックされているaf-link-text(アフィリエイトのテキストリンク)やmoshimo(もしもアフィリエイトのリンク)はもうちょっと頑張らないとななんていうことが、数字で定量的に把握することができるのです。単なるパーツごとのクリック数にとどまらず、ページ別の分析だってできてしまいます。Pixelの感想記事はよくSNSシェアされている無限ピーマンの記事はアフィリエイトリンクがクリックされているPC環境晒しの記事はもしもの商品紹介リンクが踏まれやすいなんてことが、すべて数字でわかってしまうのです。GoogleタグマネージャーとGoogleアナリティクスは仮説検証ツールおそらく、おおくのブロガーさんはこれまで経験則をベースにデザインやリンクの配置を調整してきたかと思います。GTMとGAの組み合わせによって定量データに基づく仮説・検証サイクルを回すことが可能になるのです。ドヤァおめーな、これWebやアプリ業界ではやって当たり前のことだぞ。グロースハックのキホンのキだろーがよドヤァ・・・Googleタグマネージャーの導入〜Googleアナリティクスで分析するまでの設定方法では実際にGoogleタグマネージャーを導入し、Googleアナリティクスで分析するまでの手順をご紹介します。ここでは話を簡単にするため、ブログ記事に埋め込んだアフィリエイトリンクがどれだけクリックされているかを測定してみようと思います。アフィリエイトリンク側の準備まず事前準備として、Googleタグマネージャーが自動的にタグを入れ込む先を識別できるための仕込みをしておきます。ここでは例として、アフィリエイトリンクにafilinkというクラスを追加しておきましょう。herf=&quot;https://XXX&quot;&gt;アフィ&lt;/a&gt;Googleタグマネージャーにアカウント登録する次にGoogleタグマネージャーにアカウントを登録するのですが、詳しい手順はこちらのサイトに載っていますので、ここでは割愛します。analyze.siraberu.infoGTMのコードをhead要素に追加するのをお忘れなく!登録できましたか?ダッシュボード、出てきました?ではさっそく、Googleタグマネージャー側の設定をやってみたいと思います。Googleタグマネージャー側でタグ、トリガーを設定するいきなり新しい言葉が出てきましたね。言うとタグ:先程まで出てきていたTagのこと。Googleアナリティクスへ送信するデータの内容を定義するトリガー:タグがGoogleアナリティクスへデータを送信するための条件を指定するということ。今回の場合は「afilink」というクラスを持ったURLがクリックされたとき「afilinkがクリックされたよ、ちなみにURLはこれだよ」という情報をGoogleアナリティクスに送るというたてつけでやってみたいと思います。タグを定義するはじめに、データを発射する実体であるタグを定義します。Googleタグマネージャーのダッシュボード画面で新しいタグを作るを選択。タグとトリガー、両方出てきますが、ここはタグを先に作ります。データをどこに発射するかを選択する画面が出てきます。Analytics)」を選びます。ちなみに「従来のアナリティクス」は古いバージョンのGoogleアナリティクスを使うものです。後方互換のために残されているだけなので初めての人は無視してOK。次のように入力して保存します。URL}}値:1以上でタグの設定は完了です。これによってUA-XXXというIDを持ったGoogleアナリティクスの箱に対し、「イベント」という種類のデータを飛ばす。値:1というタグができあがりました。カテゴリ、アクション、ラベル、値は自由に指定できます。細かなドキュメントはこちらをどうぞ。Developersトリガーを定義するさて、弾込めが済んだのであとは引き金を引く準備をしましょう。タグの定義を保存したら、下に現れる「トリガーの設定」を選択します。トリガーのタイプは「クリック→リンクのみ」を選択。トリガーの発生場所に「一部のリンククリック」を選択。ElementCSSセレクタに一致する.afilinkと入力していきます。この設定はURLリンクをクリックしたらデータ送信するよただし「afilink」というクラスを持っている場合だけねという意味を持っています。ここにきて、最初にアフィリエイトリンクにafilinkというクラスを付与したことが活きてくるわけです。関係ないURLがクリックされたときにも「アフィリンク踏んだぜ」と知らされても困りますもんね。プレビューモードで動作テストするさて、タグとトリガーを保存できたなら残りはあと少し。動作テストをして、ちゃんと動けばOKです。Googleタグマネージャーのダッシュボードの右上に「公開」というボタンがありますね。クリックすると「プレビュー」というものがあるので、押してみます。するとこんなバーが現れます。プレビュー中ですよ、とのことなのですが・・・プレビュー中の状態でGTMを仕込んだWebサイトを開いてみましょう。下半分にこんなものが表示されます。意図したトリガーが起動するかがチェックできるデバッグ用のウィジェットです。他のユーザには見えていませんので安心してください。その状態でトリガーを仕込んだリンク(afilink)をクリックしてみて、実際にトリガーが反応し、タグが実行されることを確認します。Page」に自分が追加したタグ名が出てくれば成功です。出てこない場合、ウィジェット内でタグ名の書かれたカードをクリックすると、具体的にどの条件がマズっているかがわかるようになっています。×がついている部分を参考に、GTM上でトリガーの定義を見なおしてみましょう。成功している場合、Googleアナリティクスの「リアルタイム→イベント」にタグに指定した文字列とともにデータが飛んできているはずです。公開し、座して待つ動作テストが済んだらいよいよ本番への展開です。GTMでは「公開する」と呼ぶそうですね。右上の「公開」から「公開」をクリック。バージョン名やらなにやら入力する欄が出てきます(画面割愛)適当に入力してOKを押せば完了です。これで、アフィリンクが踏まれるたびにGoogleアナリティクスにデータが飛ぶようになりました。ある程度データがたまったら、Googleアナリティクスの「行動→イベント」でイベント分析をしてみましょう。お疲れさまでした!クリック測定したいパーツがあったらGoogleタグマネージャーを入れてみよう以上の手順を気になるパーツごとに設定すれば、Webページのあらゆるパーツのクリック回数を把握することができます。使われていないボタンや意味のないアフィリンクをあぶり出すよく利用されているものからその要因を探り、他に活かすデザインの変更に伴う反応の変化を測定し、改善につなげるということができるようになります。参考までに、本記事執筆時点で本ブログにはこのようなトリガーを仕込んでおります。みなさんのクリック、分析させていただいてますよ!まとめ:Googleタグマネージャーで手探りの改善から脱却しようというわけで、GoogleタグマネージャーとGoogleアナリティクスを使ったクリックトラッキング手順をお送りしました。「なんとなく手探り」による改善から、数字に基づく仮説検証サイクルを回す改善へレベルアップしてみませんか?なお、本記事で解説したのはほんの触りの部分だけ。クリックトラッキングに特化した設定方法だけを超ショートカットして解説したのみです。GoogleタグマネージャーとGoogleアナリティクスを組み合わせるともっと広く深い分析ができますし。そもそもこれらを使いこなせることは1つのスキルになります。初学者でも学びやすい本を2つご紹介します。1冊目は入門編、2冊目は応用編です。手にとって読んでみてください。理解が深まると思います。NaeNote「ブログカードは死ぬほどクリックされない」はウソ。風呂にメガネを持ち込むべき理由。(id:nice_and_easy)外資コンサルでIT戦略やってるアラサー管理職です。余計なことを考えず、気楽に生きるアイデアを発信しています。