プレイドでのインターンを振り返って

<html><head></head><body><p>最近またpokemon goをやり始めた kataigi です。</p>
<p>プレイドで開発しているKARTEはユーザーのアクセス情報を分析するサービスの一種です。KARTE以外にも、Google AnalyticsやAdobe SiteCatalystなどユーザーのアクセス情報を分析するサービスは多くあり、使ったことある人も多いでしょう。ただ、そんなサービスでもどんな方法でデータを取得・トラッキングしているか知らないと、データの正しい意味がわからず、使いこなすことは難しいかと思います。ここではそんな分析の前提となるデータのトラッキングの方法をざっくりまとめてみました。</p>
<p>トラッキングの方法には様々な種類があります。どんな状況でも正確にデータが取れる方法というのはないため、それぞれの方法の特徴を知った上で、環境とデータに合わせて使い分けるのが大事です。今回は、ページやコンテンツの表示回数を測るインプレッショントラッキングと、クリック回数を測るトラッキングについて詳しくみてみたいと思います。</p>
<h1 id="インプレッショントラッキング">インプレッショントラッキング</h1>
<p>一つ目は表示回数のトラッキングです。ページが表示される時はページビューですが、例えば商品レコメンドなどでは、同じページでも表示される商品情報が変わるなど、ページ閲覧回数とコンテンツ表示回数は異なってくるため、コンテンツの表示回数も計測したい場合は、より一般的にインプレッション（露出回数）という用語が使われます。トラッキング技術としてはページビューはインプレッションに含まれるので、ここでは合わせてインプレッショントラッキングとします。</p>
<p>基本的にはページ/コンテンツが表示された回数を測ることになります。コンテンツが自分の管理下にあるか、計測タイミングがコンテンツ表示前か後か、というあたりで使う技術が変わってきます。</p>
<h2 id="アクセスログ">アクセスログ</h2>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/e665a42d-9f4a-413f-a96b-57b0556d838a/image1.png" alt="image1"></p>
<p>一番シンプルな方法は、サーバ自体のアクセスログを使う方法です。コンテンツを表示する時のブラウザからのアクセスをサーバ上でログに残しておく方式になります。原理的に、コンテンツ配信サーバ自体を自社で管理していないと計測できません。</p>
<h3 id="メリット">メリット</h3>
<p>概ねどのサーバでもアクセスログは出力されるため、準備不要で計測でき、最も手軽。</p>
<h3 id="デメリット">デメリット</h3>
<p>アクセスログを計測するため、自社管理対象のサーバしかカウントできない。<br>
アクセスがあった ≠ 表示されたではない（ブラウザで描画される前に離脱してるかも）ので、計測値は真の値より多くなる。</p>
<h2 id="ピクセル（ビーコン）">ピクセル（ビーコン）</h2>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/c5b88637-a42c-45e5-a16c-e88980ba3ff4/image2.png" alt="image2"></p>
<p>２つ目はピクセルトラッキングとかビーコントラッキングと呼ばれる方法です。この方法は、ページやコンテンツと一緒に極小の画像（ピクセル）を読み込ませ、その画像へのアクセスを計測する方法になります。読み込ませる画像は自社のサーバ外に置いても良いため、多くのアクセス解析システムで用いられている方法です。</p>
<h3 id="メリット">メリット</h3>
<p>自社管理外のサーバでもカウント可能。<br>
HTMLメールなど、配信されるコンテンツでも計測可能。</p>
<h3 id="デメリット">デメリット</h3>
<p>コンテンツが表示されても即離脱するとカウントされないため、滞在時間が短いなど一部指標の計測が難しい。<br>
メーラーなどのJavaScriptが使えない環境だと、ピクセルが描画されてしまい、コンテンツが崩れる可能性がある。</p>
<h2 id="スクリプト">スクリプト</h2>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/a34d47fb-e4e9-4951-8c6e-01212b8c21f9/image3.png" alt="image3"></p>
<p>ピクセルトラッキングでは画像にアクセスしていましたが、実際は画像ではなくても特定のURLにアクセスさえしてくれれば同じことが実現できます。そのためページやコンテンツの表示に合わせてJavaScriptで計測用のURLへアクセスする方法も取られます。<br>
JavaScriptを使用できるため、好きなタイミングで計測できるようになります。例えば、滞在10秒後・20秒後・30秒後…にトラッキングして滞在時間を計測したり、ページのスクロール率100%のタイミングでトラッキングして、ページの読了率を計測したりもできます。<br>
IAB（ <a href="https://www.iab.com/guidelines/iab-measurement-guidelines/" target="_blank" rel="noreferrer">https://www.iab.com/guidelines/iab-measurement-guidelines/</a> ）が提示しているような、厳密な計測（コンテンツが50%以上表示されていること、など）を行う場合は、JavaScriptによるタイミングの制御が必須となってくるため、必然的にこの方法が用いられます。</p>
<h3 id="メリット">メリット</h3>
<p>ページの50%以上読み込んだらなど、集計タイミングを柔軟に作れる。</p>
<h3 id="デメリット">デメリット</h3>
<p>JavaScriptが必須なため、メーラーなどJavaScriptの実行を制限された環境だと使えない。</p>
<h1 id="クリックトラッキング">クリックトラッキング</h1>
<p>続いてはクリックトラッキングについてです。ページやコンテンツの効果を測りたい場合、インプレッション数に加えて、実際にコンテンツをクリックした回数を計測することが必要になります。その時のクリックの計測方法も複数あります。</p>
<h2 id="リダイレクタ">リダイレクタ</h2>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/367fa81d-167f-48cc-9909-5280545f3d42/image4.png" alt="image4"></p>
<p>クリックした時に目的のページへすぐに遷移せず、一旦別のサーバを挟む計測方法です。httpのstatus code 302を活用します。リンクをクリックした時に一旦リダイレクトサーバにアクセスし、そのクリック情報を記録したのち、ブラウザのstaus code 302のリダイレクト機能を使って目的のサーバへ遷移させる方法です。<br>
短縮URLと呼ばれる機能とほぼ同じ動きをするため、合わせて実装されていることが多い印象です。</p>
<h3 id="メリット">メリット</h3>
<p>一般的なWebの仕組みに乗っているので、だいたいどこでも動く。</p>
<h3 id="デメリット">デメリット</h3>
<p>余計な遷移を挟むため、ページ遷移が少し遅くなる。</p>
<h2 id="イベントハンドラ">イベントハンドラ</h2>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/9cf48347-7b15-49b5-9b3c-a15583995563/image5.png" alt="image5"></p>
<p>２つ目はリンクのclickのイベントハンドラを使う方法です。JavaScriptを使うことで、リンククリック時の処理(onclickなど）に介入して、ページ遷移をする前にアクセス情報を記録用のサーバへ飛ばす方法になります。クリック情報記録用のアクセスとページ遷移を非同期に行えるようになるので、前述のリダイレクトのような不要なページ遷移をせずに実行できます。</p>
<h3 id="メリット">メリット</h3>
<p>余計なページ遷移を発生させないで済む。</p>
<h3 id="デメリット">デメリット</h3>
<p>別途clickハンドラが設定されているとかち合うことがある。<br>
JavaScriptが使えない環境では動かない。</p>
<h1 id="まとめ">まとめ</h1>
<p>アクセス情報やクリック情報を計測するための技術を駆け足で見てきました。複数の計測の仕組みを作るのは大変ですが、正確な計測を行うためには環境に応じて技術を使い分ける必要があります。環境と計測内容から適切な計測方法を探し出してみてください。</p>
<p>CX（顧客体験）プラットフォーム「<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。<br>
詳しくは<a href="https://plaid.co.jp/recruit/engineer.html" target="_blank" rel="noreferrer">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects" target="_blank" rel="noreferrer">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>
</body></html>

ウェブ上でのデータを解析する前に、まずはデータを正しく計測したい！ユーザーのインプレッションとクリックのイベントを収集する方法をまとめました。

計測したいものに合わせてイベントトラッキングをする方法