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の目的と概要 われわれウェブサイト運用者は cookieやローカルストレージなどを使ってブラウザにドメインのデータを保持し、 それらのデータを必要に応じてツール間で連携する ことによって行動計測やコンテンツの出し分けなどのマーケティング活動を行っている。ITPはウェブサイト訪問者のプライバシー保持のためにそれを制限する仕組みである。具体的に何をやっているのかざっくりまとめると、 この3つのケースにおいて cookieなどを使ったデータ保持が短…
Googleタグマネージャー（GTM）とはGoogleが提供している無料のタグマネージャ。 Googleアナリティクスの管理に向いている。 設置 タグは2個あり、両方設置する。それぞれ設置個所が決まっている。 ～内 <body>開始タグの直後 ここにないとSearch Consoleなどの認証で失敗する。 タグの設定 タグ＋トリガー＋変数 のセット→これら設定の一式をコンテナという タグ→実行するタグ トリガー→タグの実行（発火）条件 変数 トリガーの中での条件判定に使う タグに動的に値を渡す（データレイヤー） 条件判定で使う変数は、たとえば クリックしたリンクのURL ログイン済…
Googleアナリティクスのapp+webプロパティがリリースされ、実はサイト訪問の行動ログをBigQueryに出力できるようになった。 app+webプロパティそのものの説明 これまではGoogleアナリティクス360（GA360）を利用し、そのうえでGoogleに申請しないとログデータをBigQueryに出力することはできなかった。そのためコスト面での高いハードルがあったのだが、今回はFirebase利用に伴うGoogle Cloud Platform（GCP）の従量課金コストだけでログをBigQueryに出力できるようになったのである。しかし連携のための設定手順が大変難しく、有名な記事に…
iOS12.2以降で搭載されるSafari12.1からITP2.1が導入される。 「Googleアナリティクスのcookieが使えなくなるのではないか」などの漠然とした不安が先行しているようなので、その要点と影響範囲、対策方法をまとめた。 ITP2.1とは 対象の環境 ブラウザSafari12.1以降 このSafariを搭載する対象OSはiOS 12.2/mac os 10.13以降 これまでのITP（2.0以前）からの更新内容 トラッカー認定されたcookiesがすぐ無効化される トラッカー認定されたcookieは以前は通常利用できない別にところに置いておかれた（partitioned co…
Googleアナリティクスで収集しているデータ（メジャメントプロトコル）をBigQueryに送り、集計・可視化できるようにする。無料版のGAにも対応し、しかもサーバレスでシンプルに実装できる。 本来BigQueryを使ったウェブ行動の詳細分析はGA360を使うべきなのだが、限りなく低コストでこんなことができるという参考程度で紹介する。 通常無料版のGoogleアナリティクスではできないログベースの行動分析をするのに使ったり、有料版であったとしてもGAはどのようなトラフィックを除外して集計しているのか、Googlebotなどのクローラがどんな動きをしているのかなどを検証するのに使うといいかもしれ…
昨今Googleタグマネージャ（GTM）やYahoo!タグマネージャー（YTM）など無料で使えるタグマネージャーが現れ、タグマネジメントが一般化してきている。ではそもそもタグマネジメントとは何か。タグマネージャは変われどタグマネジメントの考え方は基本的にどのツールを使っても同じ。その基本を説明するとともに、後半では無料で最もお手軽に使えるGoogleタグマネージャの設定方法の解説をする。 タグマネジメントとは 「タグマネジメント」とはその名の通りwebサイトに設置するタグの一元管理である。 では管理すべきタグにはどんなものがあるのか。 アクセス解析ツールのタグ 広告のタグ コンバージョンタグ …
Googleアナリティクスの設定を効率化するために、 管理画面を見る前に決めておくべき項目のチェックリスト Googleアナリティクスの管理画面での設定作業の手順 設定内容を一覧で出力するツール を紹介する。設定内容の出力は初期設定時に限らず、現状のアカウントの設定状況を把握する上でも役に立つだろう。 Googleアナリティクス設定前チェックリスト Googleアナリティクスの管理画面にログインする前に決めておくべき要件で、 Googleアナリティクスに限らない、アクセス解析の要件定義である。 これを決めずに管理画面を見るのは時間の無駄。 このチェックリストを完成させるのに時間を割こう。 重要…
GoogleアナリティクスとGoogleタグマネージャーのマニアックな話題。 通常GoogleアナリティクスをGoogleタグマネージャーを使って設置すると、GAのビーコンを呼び出す際のトラッカー名はGTMによってランダムな名前のものが割り当てられる。 たとえばこんな「gtm1463146770599」形式のものである。 そうなると生成したトラッカーそのものを使って何らかの処理をすることが難しい。 GTMの設定の中で固定のトラッカー名を付与すればこの問題は発生しないが、大人の事情でGTMの設定権限を与えられていない場合もある。 生成したトラッカーからさまざまな情報を取得したり、その情報に基づい…
Googleアナリティクスなどでページの精読状況をトラッキングする際、 「特定ピクセル以上スクロールする」「画面の○％以上スクロールする」ことがあるが、 同様に「特定の要素を表示したとき」という条件でトラッキングしたいときもある。 コンテンツの精読だけでなく、たとえばクーポンをページに仕込んでおいて その表示回数をカウントするなどのケースでも使える。 そのような場合にエレメントの座標を取得して、そこまでスクロールしたら発火するというアイデアがあるが、 実はスマートフォンでは機種によって画面の幅が異なるため、テキスト部分の行数が変わり、縦座標の値も変わってくるという問題がある。 単純に縦の位置を…