PointGTMのイベントトラッキングと独自変数の使い方グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。WEB制作GTMのイベントトラッキングを使うことで、設置している広告のクリック数やクリックされたページ、クリックされた商品名が取得できます。イベント計測をしよう前回のGTM導入偏で、イベントトラッキングの話をしたまま終わったので、今回はイベントトラッキングの説明をします!GTMを個人サイトで入れるメリットはこれだけだと捨て台詞を吐いて終わったので、ちゃんと説明したいと思います。前提として、GTMの導入がすでに終わっている、というところから始まります。グーグルタグマネージャー導入偏はこちらからグーグルタグマネージャーの導入手順とメリットについてグーグルタグマネージャーを入れて良かった点は、イベントトラッキングが簡単にできるようになったことです。GTMの概念や導入方法ってわかりづらい。見ようかなという初心者の方向けに図をたっぷり使って解説記事を書きました。サイト内リンク:https://www.start-point.net/blog/web/seo/gtm/イベントトラッキング用のトリガーを作成するアナリティクスのイベントトラッキングの設定を行います。先に説明した、どんな広告がクリックされたかを計測するための設定です。トリガーを作って、計測したいURLを登録して、タグに紐づければ完了です!商品名を取得するdata属性を設定する一番難しいところから先に説明します。トリガーを独自変数で設定することで、指定した文字を取得することができるようになります。data属性に商品名を指定HTMLタグのデータ属性とはデータ属性というのは、好きなタグに設定して、自由に使える情報を渡すための項目、とでもいいましょうか。リンクを設定するタグに<a>~</a>タグがありますよね。data-name="テキスト">となります。「data-XXX="テキスト"」とするだけで使えます。右側に取得したいテキストをいれます。このテキストは日本語も使えます。そのデータ属性をGTMで取得する設定をすると、データ属性で指定したテキストがイベントラベルに表示されます。Amazonのアフィリエイト管理画面だと、クリック数はわかるけど、何がクリックされたかはわからないんですよね。売れた商品は教えてくれるけど。data-nameを取得する変数を作る「data-name」というデータ属性を取得するための変数を定義します。GTMの変数に入ってユーザー定義変数の新規をクリック。変数タイプから「データレイヤーの変数」を選択してください。変数タイプの設定データレイヤーの変数名を指定データレイヤーの変数名を設定します。「gtm.element.dataset.name」と入力してください。データレイヤーの変数名を設定これは「gtm」の「element」の「dataset」から「name」を取得するという意味なので、data-testだったらgtm.element.dataset.testになります。入力が終わったら変数名に名前を付けて保存をします。私は「data-name取得」という名前で保存しました。このあと出てきますので覚えておいてください。トリガーを作って設定する変数の定義が終わったので、次はクリックで測定できる「トリガー」を作ります。左にある「トリガー」を選択し、「新規ボタン」を押してください。トリガーを作るトリガータイプをクリックから選ぶトリガーのタイプをクリックにある「リンクのみ」を選びます。URL」を選び「先頭が一致」を選んで、前方一致のURLを入力します。計測するURLを設定この作業をURLの分だけ繰り返します。Amazonのリンクと、A8のリンクと、バリュコマースのリンクを取得したいので、3つトリガーを作ります。計測するURLについて私は、Amazonのクリックと、A8のクリック、バリューコマースのクリックの計測がしたいのでその3つを入力しています。AfiBでも、もしもでも、レントラックスでも、フェルマでも入力規則は同じだと思います。(全部ASPの名前です)AamzonのURL設定https://www.amazon.co.jpこれを入力しています。APIのアマゾンアフィリエイトの設定です。私は1URLごとにトリガーを分けています。それぞれわかりやすい名前をつけて、保存をクリックします。タグの設定をしてトリガーを紐づける再び、タグを作って、今作ったトリガーを設定していきます。タグの新規をクリックしてアナリティクスを選ぶ最初にやった作業と同じです。タグを選んで新規を押して、えんぴつを選んで下さい。タグの新規作成これも同じ。GAタグの一番上のやつを選びます。GAタグの一番上を選択イベント計測用の設定ここからイベント用に設定していきます。トラッキングタイプをイベントに変更して、以下図のように設定します。イベントトラッキングの設定トラッキングタイプは「イベント」を選択し、カテゴリ、アクション、ラベルは、横にあるブロックアイコンをクリックして選びます。Text」ラベルには「data-nameを取得」を選びます。HTMLにdata属性を設定data属性の取得がなければ、GTM上の設定だけでイベントが完了するのですが、data-nameを取得したいタグに設定します。<a>タグに、data-name="商品名"を設定します。電子書籍リーダー">Amazonで詳細を見る</a>長いので改行して一部省略して書くとこう。電子書籍リーダー">Amazonで詳細を見る</a>こんな感じで、取得したいリンクにdata-nameを振って、設定する。準備が整ったら「公開ボタン」を押して完了です。公開を忘れると動きませんこれでクリックイベントの計測ができるようになりました。data属性使わなければ、GTM上の設定だけでクリックイベントが取得できるんで、簡単だったんですけど、data属性の話を入れたせいでものすごく大変なイメージがありますね。イベントトラッキングの設定まとめこの記事を読んで、やってみようという方が何人いるのか、誰もいないんじゃないかとそんな予感もありますが、とりえあず最後まで書きました。めんどくさいんだけど、どんなリンクがクリックされたか知りたいじゃないですか。手間かかるけど、これによって色々なテストができるようになるので、役に立つ人もいるんじゃないかと、そういう気持ちで書きました。導入せずとも、グーグルタグマネージャーがどんなものかが少しでも伝わったら嬉しいです。仕事でEC系のWEBマーケティングやると「GTM」か「YTM」は大体導入されていると思うので、知っとくだけでもちょっとはいいじゃないかと思います。ここまで読んでいただけたら、それだけでも幸いです。次の記事はこちら参考にならない適当につくるアイキャッチの作り方!ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。鳥好きWEB制作とWEBマーケティングをやってきました。PHPとMysqlを使って面白いことをやりたいと模索中です。キーワード選定の方法を考察してみたSEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。SEOで重要なtitleタグとhタグの使い方SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。カノニカル設定とリダイレクト設定URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定ですブログのアクセスアップに欠かせないSEO的リンク構造の考え方SEOのリンク構造を効果的に作るための情報をまとめました。可能な限り情報の出どころのリンクも用意しております。通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説ブログアクセスランキングBluetoothイヤホンのペアリング方法とリダイヤル防止策Bluetoothイヤホンのペアリング方法やリモコンの操作方法、リダイヤルの防止策を画像入りで解説します。3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。ネットワークオーディオを使わずにPCの音楽を再生する方法パソコンに取り込んだ音楽をせっかくならCDコンポから再生したいと思ったことありませんか?AUXを使った外部接続の方法の紹介です。α7IIIで運動会に初参戦!ズームレンズ1本でも楽しめる!子供の運動会にα7IIIで初参戦!望遠レンズを買おうか迷ったのですが、本体とセットのズームレンズ1本で運動会を撮影してきました。α7IIIを片手に東京の夜桜スポットに行ってきました。中目黒と千鳥ヶ淵の夜桜を紹介しながらα7IIIのレビューです。鳥好きWEB制作とWEBマーケティングをやってきました。PHPとMysqlを使って面白いことをやりたいと模索中です。