始めてみてはいかがでしょうか?サイトの速度とはまずはユニバーサルアナリティクスがどのようにフロントエンドの速度を計測しているのかを解説します。タグマネージャの設定だけを知りたい方は本項をスキップしても問題ありません。いうものが用意されていて、事前に定義されたタイミング毎にその時刻をミリ秒単位で記録しておいてくれます。仕組みになっています。資料が詳しいので気になる方はご参照ください。実行される)ユニバーサルアナリティクスで記録されるサイトの速度指標ユニバーサルアナリティクスには「読み込み時間」「ドキュメントコンテンツ読み込み時間」などサイトの速度に関する指標が8種類用意されていて、それらの速度がサンプリングレートに基づいた一部のページビューに対して記録されます。onloadイベント実行直前)までの経過時間。onloadイベントの処理時間は含まない。画像・CSS等の読み込みを含む。操作開始からdomContentLoadedイベント直前(HTMLの解析が完了した状態)までの経過時間。画像の読み込みを含まない。サーバーの応答時間リクエスト開始からレスポンス開始するまでの経過時間。サイト速度を記録する方法です。送信では具体的な設定を見ていきます。GA4設定タグの作成タグマネージャの画面からタグの新規ボタンを押して以下のように設定します。各種イベントも送信されるようになります。タグ呼び出しオプションで「1ページにつき1度」としているのは以降で追加する「GA4イベント」タグが当タグに依存するためで、それらの依存タグが「GA4設定」タグを先に配信させた場合の重複した読み込みを抑止できます。ウィンドウの読み込みトリガーの作成サイトの速度を記録するためにはページの読み込み完了後に処理を実行する必要があるので新規トリガーを追加します。トリガーのタイプから「ウィンドウの読み込み」を選択して「ウィンドウの読み込みトリガー」という名前で保存します。新規タグを作成してタグタイプからカスタムHTMLを選択して以下のコードを貼り付けます。このコードはユニバーサルアナリティクスが取得していたサイトの速度指標となるべく同じような指標になるように速度データを取得しています。任意の速度指標を計測したい場合は送信するデータを自由に変更してください。対応が中途半端で特定の指標に異常値を返すことがあります。今回はその緩和策として300秒を越える数値をタイムアウトとみなして無視しています。})();</script>トリガーには先ほど作成した「ウィンドウの読み込みトリガー」を設定します。いうイベントをタグマネージャに対して送信します。よる解析をする際に解説します。サイトの速度指標のサンプリングレートについて本記事では全てのアクセスに対してサイトの速度指標を記録するように設定していますが、ユニバーサルアナリティクスのように一部アクセスをサンプリングして記録したい場合はトリガーの設定を調整してください。タグマネージャの変数に乱数を追加してその数値に基づいて任意の確率でトリガーを起動するように設定することもできます。)を利用するためにタグマネージャで変数を作成します。左メニューから変数を選択、ユーザー定義変数の右上にある新規ボタンを押してデータレイヤー変数を追加します。変数のタイプは「ページ変数」の「データレイヤーの変数」を選びます。データレイヤーに送信した変数は9種類あります。同じ手順で以下の変数を作成します。timing_navigation_starttiming_page_loadtiming_domain_lookuptiming_server_connectiontiming_server_responsetiming_page_downloadtiming_redirectiontiming_document_interactivetiming_document_content_loaded変数を全て追加すると以下のようになります。本記事ではユニバーサルアナリティクスと互換性のあるサイトの速度指標を利用していますが、中には利用頻度の低いものも含みます。いらないと思った指標は任意で省いても問題ありません。イベントをタグマネージャで受け取るためのトリガーを作成します。新規のトリガーを作成してトリガーのタイプから「カスタムイベント」を選択します。入力してトリガー名を「timingイベントトリガー」として保存します。サイトの速度データを送信するタグを作成します。送信している点に注意してください。理由は後ほど解説しますが解析時に必要です。タグマネージャの設定はこれで完了しました。左メニューから「設定」を選び、さらに表示された左メニューから「カスタム定義」を開きます。イベントを送信する際に付与する追加データは「イベントパラメータ」と呼ばれます。いう独自のイベントに速度データをイベントパラメータとして付与して送信しています。画面上で閲覧する方法が限定されるので各イベントパラメータをディメンション/指標に割り当てて探索画面などから利用できる状態にします。カスタムディメンション「カスタムディメンションを作成」ボタンを押して以下の情報を入力して保存します。次にカスタム指標に切り替えます。「カスタム指標を作成」ボタンを押して、下記表の通り9種類のカスタム指標を作成します。全て設定すると以下のようになります。タグマネージャのプレビュー機能でテストした上でタグを公開します。イベントや速度情報が送られていることを確認した上で翌日以降に以下のような手順でデータが正しく表示されることを確認します。サイト速度を分析する次は上記手順で記録したサイトの速度を分析する方法を紹介します。左メニューの「探索」から「空白」を選んでデータの探索画面を開きます。ディメンションのインポートディメンションの横にあるプラスボタンでディメンションの選択画面を表示します。次に「ページの場所」と「timing_navigation_start」をチェックしてインポートボタンを押します。指標のインポート同様に指標の横のプラスボタンで指標の選択画面を開いて以下の指標をインポートします。表示された値はそこに含まれるデータの合計値です。なっていることから、実際には10ページビュー分の合計値であると分かります。表示する方法は用意されていないようです。計算することで得られます。データポータルからは平均値を利用できるので次はその方法を紹介します。データポータルで平均値を含んだ一覧を表示する方法もあります。データポータルのデータソースとして追加すると各カスタム指標に対する平均値の指標を自動的に用意してくれます。データを表示していて1行目は以下の数値になっています。なっていることが確認できます。次はアクセスログのような1行に対して1アクセスの形式で読み込み時間(timing_page_load)を出力する方法を解説します。実現できるならばそれも選択肢の一つです。ディメンションに指定した項目値ごとに集計された数値を出力します。保存しているのはページへのアクセス開始時刻のミリ秒です。ミリ秒単位の同一時刻に同一ページへのアクセスが発生しない限りは別々のレコードで出力されます。なっているので狙い通り行が分離したことが分かります。この状態では同一時刻同一ページのレコードが万が一含まれていた場合に複数回のアクセスの合計値が読み込み時間(timing_page_load)として出力されてしまいます。絞り込みを設定すると取りこぼしの可能性はありますがより安定したデータが出力されます。経過ミリ秒なので簡単な計算(※)で日時に変換可能です。ブラウザやOSなどの情報をディメンションに追加したらよりアクセスログっぽいものを作ることができます。以下のような式でタイムゾーン+09:00の日時に変換することができます。部分は該当カラムの値が保存されているセルを参照してください。利用可能にする設定を紹介してみました。タグマネージャを利用している環境ならウェブサイト自体の変更はなく導入できるのでぜひ活用いただけたらと思います。ラクーングループではエンジニア・デザイナーを絶賛大募集中です。