JavaScriptの計測タグと最近のウェブページレンダリング(SPA、SSRなど)

最近増えているSPA、SSR、SSGとは何か 最近ではSPA(シングルページアプリケーション)、SSR(サーバサイドレンダリング)などといったウェブページの表示の仕組みを採用するサイトが増えている。これらのページではウェブ解析ツールの計測タグや広告のリマーケティングタグなどが正しく動作しないことがある。SPAの仲間にはSSR、SSGがあるが、これらの共通点はSPA内でのページの遷移時にページの読み込み処理(ロード)が行われない点である。 これらのページではページを最初に表示するときにだけ読み込み処理が行われる。そこでページのアセット(画像やJavaScriptのファイル)がまとめて読み込まれる…

続きを読む →

ポストサードパーティcookie時代のソリューションとプライバシー

Googleは現時点では廃止自体を諦めたものの、個人のプライバシー尊重の観点からサードパーティcookieを廃止する動きを進めていた。AppleのiOSやSafariではすでにITPによってサードパーティcookieはデフォルトで使えなくなっている。 そんな中サードパーティcookieに代替する技術としてさまざまな技術をGoogle自身も開発し、他のベンダもそういった技術を開発してきた。その結果さまざまな自称「ポストcookie」「cookieレス」ソリューションが出てきているのだが、それらはどれも完全にサードパーティcookieを代替するわけではなく、これまでサードパーティcookieが担っ…

続きを読む →

高度な計測に使えるGTMの黒魔術とタグアシスタントの裏技

マニュアルには書いていないGTMとGoogleアナリティクスの高度な使い方。とりあえず設定しておくと便利な変数やトリガーの使い方に加え、データレイヤーを徹底的に使いこなす。さらには計測だけでなく検証の手間を大幅に省くタグアシスタントの裏技を紹介する。最後にGTMを使ったGoogleアナリティクスの高度なcustomTaskや推奨カスタムディメンションも触れる。 GTM設定の黒魔術 便利な変数 ページビューID ページビュー固有のID 一度ページを読み込んでから、次に読み込むまでの間で保持されるID そのIDをさまざまなツールに送ればそれをキーにデータ連携できる。 ツールA,B,Cの間でIDを連…

続きを読む →

Googleアナリティクス4で管理画面だけでコンバージョン設定する

Googleアナリティクス4は当初コンバージョン設定するためにはコンバージョン対象ページでタグをカスタマイズする必要があったのだが、アップデートでタグのカスタマイズが不要になった。しかしユニバーサルアナリティクスのようにコンバージョン設定画面でURLを指定できるわけではなく、少し回りくどい設定が必要になる。この記事ではその方法を説明する。 機能のアップデート 既存のイベントから、イベント名やイベントパラメータの条件に基づいて新たなイベントを生成する機能が追加された。 これは大変便利な機能で、これまでイベントの再定義をしようと思ったらSDK(JavaScriptのタグやアプリのSDK)の入れ替え…

続きを読む →

Googleアナリティクス4のデータをBigQuery出力する

Googleアナリティクス4ではサイト訪問の行動ログをBigQueryに出力できるようになった。 従来のGoogleアナリティクス(ユニバーサルアナリティクス)ではGoogleアナリティクス360(GA360)を利用し、そのうえでGoogleに申請しないとログデータをBigQueryに出力することはできなかった。そのためコスト面での高いハードルがあったのだが、Googleアナリティクス4ではGoogle Cloud Platform(GCP)の従量課金コストだけでログをBigQueryに出力できるようになったのである。以前はこの設定で直接Firebaseの管理画面からダミーアプリを作る手順が必…

続きを読む →

GoogleアナリティクスでcanonicalをページのURLとして自動で採用する

アクセス解析における計測URLの分散の問題 Webサイトのページビュー計測では、同一ページのページビュー計測は1つのURLのページビューとして集約されることが望ましい。ところがutm_sourceなどのダミーパラメータ付きURLや「index.html」の有無によって本来同一ページのはずなのにURLが異なり、ページビュー数の評価が分かれてしまうことがある。あらかじめサイト構成が「1ページ=1URL」を厳格に守ってくれていればいいのだが、必ずしもそういうわけにはいかない。実際には1ページに複数のURLが発生することも多いのである。 SEOでは行われているURL正規化 SEOではその問題を解決する…

続きを読む →

サルでもわかるGoogle Chromeのプライバシー対策で何が起こるのか

Chromeが2年以内にサードパーティcookieをブロックすると正式に発表しました。 https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html いろいろなことが言われていますが、具体的に何が起こるのか、混同しやすいところを含めて初心者でもわかるようにまとめました(このサイトでは珍しい初心者向けの記事です)。 cookieを取り囲むブラウザ環境の変化のおさらい これまではiOS/SafariがITPの取り組みの中でトラッキング目的のサードパーティcookie(※)をブロックしてきましたが、これでS…

続きを読む →

babel/webpackを使ってJavaScriptのソースをリリース用に整備する

babelは新しいESの記法で作ったJavaScriptのソースを古いブラウザでも実行可能に変換してくれるパッケージ。webpackはJavaScriptのソースコードをminifyするパッケージ。普通は組み合わせて使う プロジェクトディレクトリにnode_modulesを作成する場合 パッケージを構築するイメージ プロジェクトディレクトリの作成 mkdir mylib cd mylib package.jsonの作成 npm init パッケージのインストール npm install –save-dev @babel/core @babel/preset-env babel-loader …

続きを読む →

ITPの変遷・最新の仕様と挙動の違い/対策の必要性と方法

ITPの仕様 次々と新しいバージョンがリリースされるITP。微妙にアップデートされ、仕様がわかりにくくなっているので現時点で最新のものを解説する。 ITPの目的と概要 われわれウェブサイト運用者は cookieやローカルストレージなどを使ってブラウザにドメインのデータを保持し、 それらのデータを必要に応じてツール間で連携する ことによって行動計測やコンテンツの出し分けなどのマーケティング活動を行っている。ITPはウェブサイト訪問者のプライバシー保持のためにそれを制限する仕組みである。具体的に何をやっているのかざっくりまとめると、 この3つのケースにおいて cookieなどを使ったデータ保持が短…

続きを読む →

Googleタグマネージャーの使い方&設定をExcelで出力するツール

Googleタグマネージャー(GTM)とはGoogleが提供している無料のタグマネージャ。 Googleアナリティクスの管理に向いている。 設置 タグは2個あり、両方設置する。それぞれ設置個所が決まっている。 ~内 <body>開始タグの直後 ここにないとSearch Consoleなどの認証で失敗する。 タグの設定 タグ+トリガー+変数 のセット→これら設定の一式をコンテナという タグ→実行するタグ トリガー→タグの実行(発火)条件 変数 トリガーの中での条件判定に使う タグに動的に値を渡す(データレイヤー) 条件判定で使う変数は、たとえば クリックしたリンクのURL ログイン済…

続きを読む →