毎週火曜日 朝6:00~6:30 "BizHack MEDIA(ビズハック メディア)" ゆめのたねラジオ放送局 関西チャンネルにて放送。

④ブログ記事の計測方法:Google タグマネージャーの設定

ITを利用する
この記事は約8分で読めます。

前記事、③ブログ記事の計測方法:スクロール率・読了率とは?では、スクロール率・読了率とは、そもそもどういう違いがあるのかを知り、使用するツールであるGoogle タグマネージャーを確認した上で、どういう手順なのかを知りました。

今回は、Google タグマネージャーのタグ作成手順を元に、実際にGoogle タグマネージャーを用いて具体的な設定をしていきます。

Google タグマネージャーのタグ作成手順
  1. 必要な変数作る
  2. その変数をトリガーに組み込む
  3. 作ったトリガーをタグに組み込む
スポンサーリンク

関係しそうなGoogle タグマネージャーの組み込み変数は?

Google タグマネージャーがはじめからもっており、関係しそうな変数は何かを確認します。

Scroll Depth Threshold: トリガー発動につながったスクロール距離を示す数値です。しきい値がパーセンテージの場合は 0~100 の数値、ピクセル数の場合はしきい値として指定されているピクセル数そのものが値となります。
Scroll Depth Units: トリガー発動のしきい値の指定に使用されている単位(「%」または「ピクセル」)が値となります。
Scroll Direction: トリガー発動につながったスクロールの方向(「縦方向」または「横方向」)が値となります。

タグマネージャーヘルプ>スクロール距離トリガーより

Percent Visible: トリガー発動時点で、選択した要素の何パーセントが視認可能かを、0~100 の数値で示した値です。
On-Screen Duration: トリガー発動時点で、選択した要素が視認可能だった時間の長さを、ミリ秒単位の数値で示した値です。

タグマネージャーヘルプ>要素の表示トリガーより

と、ありました。これが必要な組み込み変数です。

スポンサーリンク

組み込み変数の設定

関係しそうな組み込み変数を、[設定]ボタンを押して、チェック画面に入ります。

下の方にある、スクロールと可視化にある下図のチェックを入れます。

Google タグマネージャーの変数画面内、組み込み変数の設定画面イメージ

スクロール率は、このままで進めてもよさそうですが、読了率は、回数になります。このままでは、Google アナリティクスのレポートで割合の計算結果は閲覧できないため、できるようにユーザー定義変数が必要になります。

スポンサーリンク

ユーザー定義変数の設定

ここで、どうしようかな?とググっていますと、どんぴしゃでChikako saysさんのブログを見つけました。

思っていたことの設定方法を詳細に書かれているので、参考に設定しました。どうやるか考えなければならないため、時間がかかると思っていましたので、大変助かりました。

一気に時間短縮できました。ありがとうございます。

読了率のレポート閲覧のために、この記事の通りにユーザー定義変数を4つ設定しておきます。設定部分を抜粋して明記します。

①Google アナリティクスのトラッキングID用の変数

Google アナリティクスのトラッキングID UA-000000000-0 は、よく使うことになります。毎回入力するのは手間なので、変数にしておきましょう。

「組み込み変数」の、[新規]ボタンを押ます。「変数タイプを選択して設定を開始…」を押し、ユーティリティ「Google アナリティクス設定」を選びます。

「変数の設定」画面に入るので以下の情報を入れます。

変数名BizHack-TrackingID
※わかりすい名前を入れる
トラッキング IDUA-000000000-0
※Google アナリティクスのトラッキングIDを入れる
Cookie ドメイン[auto]

トラッキングIDは、Google アナリティクスの左メニューの[管理]を押して、プロパティ項目の「プロパティ設定」を押すと確認できます。

変数名を変えた場合は、その変数名に合わせてください。

②[gtm.start]を取得するデータレイヤー変数

Google タグマネージャーのタグを読み込んだ時の日時を代入した変数の設定です。

「組み込み変数」の、[新規]ボタンを押ます。「変数タイプを選択して設定を開始…」を押し、ページ変数「データレイヤー変数」を選びます。

「変数の設定」画面に入るので以下の情報を入れます。

変数名PageViewStartTime
※わかりすい名前を入れる
データレイヤーの変数名gtm.start
データレイヤーのバージョン[バージョン2]
デフォルト値を設定チェック無

変数名を変えた場合は、その変数名に合わせてください。

③経過時間を算出するカスタムJavaScript変数

Google タグマネージャーのタグを読み込んだ時からトリガー発生時の時間(秒)差を代入した変数の設定です。

「組み込み変数」の、[新規]ボタンを押ます。「変数タイプを選択して設定を開始…」を押し、ページ変数「カスタム JavaScript」を選びます。

「変数の設定」画面に入るので以下の情報を入れます。

変数名gtmstartForElapsedSeconds
※わかりすい名前を入れる
カスタム JavaScript※以下をコピペで入れる
function(){
	var start = {{PageViewStartTime}};
	var end = new Date().getTime();
	var time = end - start;
	return time /1000;
  }

変数名を変えた場合は、その変数名に合わせてください。

④ページタイトルを取得するカスタムJavaScript変数

計測ページのページタイトルを取得する変数の設定です。

「組み込み変数」の、[新規]ボタンを押ます。「変数タイプを選択して設定を開始…」を押し、ページ変数「JavaScript 変数」を選びます。

「変数の設定」画面に入るので以下の情報を入れます。

変数名PageTitle
※わかりすい名前を入れる
グローバル変数名document.title

変数名を変えた場合は、その変数名に合わせてください。

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

おつかれさまでした
スポンサーリンク

トリガーの設定

続いて、トリガーの設定をしましょう。

スクロール率

左メニューの[トリガー]を押して、[新規]ボタンを押します。「トリガーのタイプを選択して設定を開始…」を押し、トリガーのタイプ「ユーザー エンゲージメント」項目の[スクロール距離]を選びます。

「トリガーの設定」画面に入るので以下の情報を入れます。

トリガー名スクロールトリガー
※わかりすい名前を入れる
トリガーのタイプ[スクロール距離]
縦スクロール距離チェック
割合0,20,40,60,80,100
※ 知りたい割合を入れる

読了率

左メニューの[トリガー]を押して、[新規]ボタンを押します。「トリガーのタイプを選択して設定を開始…」を押し、トリガーのタイプ「ユーザー エンゲージメント」項目の[ 要素の表示 ]を選びます。

「トリガーの設定」画面に入るので以下の情報を入れます。

トリガー名読了トリガー
※わかりすい名前を入れる
トリガーのタイプ[要素の表示]
選択方法[CSSセレクタ]
要素セレクタ.author-content
※このサイトの場合
このトリガーを起動するタイミング1ページにつき1度
視認の最小割合1
このトリガーの発生場所すべての表示イベント

要素セレクタ author-content は、投稿者位置で使用しているclass名です。本サイト”BizHack”は、読んで頂ける最後の部分をココと定義しました。投稿者位置前がちょうど終わり部分にあたり、テーマcocoonの使用class名がこれでした。サイトによってclass名は違いますので、定義した適用する記事の最後の部分のclass名を入れてください。

実際のページ画面とソースを画像にしました。参考にしてください。

本サイト”BizHack”における、要素セレクタのclass名の説明画像
要素セレクタのclass名

トリガーの設定は以上で終わりです。

おつかれさまでした
スポンサーリンク

タグの設定

スクロール率

左メニューの[タグ]を押して、[新規]ボタンを押します。「タグの設定」を押し、「おすすめ」から[Google アナリティクス: ユニバーサル アナリティクス]を選びます。

「トラッキングタイプ」以降は、以下の情報を入れます。

タグ名スクロール率
※わかりすい名前を入れる
トラッキングタイプ[イベント]
カテゴリScroll_depth
※わかりすい名前を入れる
アクション{{Page Path}}
ラベル{{Scroll Depth Threshold}}
非インタラクションヒット
Google アナリティクス設定{{BizHack-TrackingID}}
※「①Google アナリティクスのトラッキングID用の変数」で入れた変数を選択
このタグでオーバーライド設定を有効にするチェック無
トリガー[スクロールトリガー] ※先ほど作成したトリガーを選択

読了率

左メニューの[タグ]を押して、[新規]ボタンを押します。「タグの設定」を押し、「おすすめ」から[Google アナリティクス: ユニバーサル アナリティクストリガー]を選びます。

「トラッキングタイプ」以降は、以下の情報を入れます。

タグ名読了率
※わかりすい名前を入れる
トラッキングタイプ[イベント]
カテゴリ読了率
※わかりすい名前を入れる
アクション{{Page Path}}
ラベル{{PageTitle}}
※「④ページタイトルを取得するカスタムJavaScript変数」で入れた変数を選択
{{gtmstartForElapsedSeconds}}
※「③経過時間を算出するカスタムJavaScript変数」で入れた変数を選択
非インタラクションヒット
Google アナリティクス設定{{BizHack-TrackingID}}
※「①Google アナリティクスのトラッキングID用の変数」で入れた変数を選択
このタグでオーバーライド設定を有効にするチェック無
トリガー[読了トリガー]
※先ほど作成したトリガーを選択

タグの設定は以上で終わりです。

おつかれさまでした

ここまでで、Google タグマネージャーの設定は終わりです。

次回は、設定したタグをきちんと動いているか確認していきましょう。

最後まで読んで頂きありがとうございました。

編集後記

実際の設定作業は、20分くらいで終わっています。見やすく文章に書き起こすとなると、とても時間がかかりました。特に設定前や設定中の画面がないので、書き起こしを意識して、スクショ取っておかないと大変だとわかりました。。。

ITを利用する
スポンサーリンク
コバタケ@BizHack

ラジオパーソナリティー/SDGs認定ファシリテーター/元デザイナー/元会社経営/『少人数×経営×IT×デザイン』をテーマに情報発信/2019年から話す仕事、書く仕事をメインに再構築/アラフォー/住処は関西/ITコンサルと開発マネジメントが得意/起業する人や年商1億までの経営者の方、ラジオゲストに出てください!

コバタケをフォローする
\ この記事が気に入ったらシェアしてね /
コバタケをフォローする
BizHack
タイトルとURLをコピーしました