<p>最近またpokemon goをやり始めた kataigi です。</p>
<p>プレイドで開発しているKARTEはユーザーのアクセス情報を分析するサービスの一種です。KARTE以外にも、Google AnalyticsやAdobe SiteCatalystなどユーザーのアクセス情報を分析するサービスは多くあり、使ったことある人も多いでしょう。ただ、そんなサービスでもどんな方法でデータを取得・トラッキングしているか知らないと、データの正しい意味がわからず、使いこなすことは難しいかと思います。ここではそんな分析の前提となるデータのトラッキングの方法をざっくりまとめてみました。</p>
<p>トラッキングの方法には様々な種類があります。どんな状況でも正確にデータが取れる方法というのはないため、それぞれの方法の特徴を知った上で、環境とデータに合わせて使い分けるのが大事です。今回は、ページやコンテンツの表示回数を測るインプレッショントラッキングと、クリック回数を測るトラッキングについて詳しくみてみたいと思います。</p>
<h1>インプレッショントラッキング</h1>
<p>一つ目は表示回数のトラッキングです。ページが表示される時はページビューですが、例えば商品レコメンドなどでは、同じページでも表示される商品情報が変わるなど、ページ閲覧回数とコンテンツ表示回数は異なってくるため、コンテンツの表示回数も計測したい場合は、より一般的にインプレッション（露出回数）という用語が使われます。トラッキング技術としてはページビューはインプレッションに含まれるので、ここでは合わせてインプレッショントラッキングとします。</p>
<p>基本的にはページ/コンテンツが表示された回数を測ることになります。コンテンツが自分の管理下にあるか、計測タイミングがコンテンツ表示前か後か、というあたりで使う技術が変わってきます。</p>
<h2>アクセスログ</h2>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/e665a42d-9f4a-413f-a96b-57b0556d838a/image1.png" alt="image1"></p>
<p>一番シンプルな方法は、サーバ自体のアクセスログを使う方法です。コンテンツを表示する時のブラウザからのアクセスをサーバ上でログに残しておく方式になります。原理的に、コンテンツ配信サーバ自体を自社で管理していないと計測できません。</p>
<h3>メリット</h3>
<p>概ねどのサーバでもアクセスログは出力されるため、準備不要で計測でき、最も手軽。</p>
<h3>デメリット</h3>
<p>アクセスログを計測するため、自社管理対象のサーバしかカウントできない。<br>
アクセスがあった ≠ 表示されたではない（ブラウザで描画される前に離脱してるかも）ので、計測値は真の値より多くなる。</p>
<h2>ピクセル（ビーコン）</h2>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/c5b88637-a42c-45e5-a16c-e88980ba3ff4/image2.png" alt="image2"></p>
<p>２つ目はピクセルトラッキングとかビーコントラッキングと呼ばれる方法です。この方法は、ページやコンテンツと一緒に極小の画像（ピクセル）を読み込ませ、その画像へのアクセスを計測する方法になります。読み込ませる画像は自社のサーバ外に置いても良いため、多くのアクセス解析システムで用いられている方法です。</p>
<h3>メリット</h3>
<p>自社管理外のサーバでもカウント可能。<br>
HTMLメールなど、配信されるコンテンツでも計測可能。</p>
<h3>デメリット</h3>
<p>コンテンツが表示されても即離脱するとカウントされないため、滞在時間が短いなど一部指標の計測が難しい。<br>
メーラーなどのJavaScriptが使えない環境だと、ピクセルが描画されてしまい、コンテンツが崩れる可能性がある。</p>
<h2>スクリプト</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/">https://www.iab.com/guidelines/iab-measurement-guidelines/</a> ）が提示しているような、厳密な計測（コンテンツが50%以上表示されていること、など）を行う場合は、JavaScriptによるタイミングの制御が必須となってくるため、必然的にこの方法が用いられます。</p>
<h3>メリット</h3>
<p>ページの50%以上読み込んだらなど、集計タイミングを柔軟に作れる。</p>
<h3>デメリット</h3>
<p>JavaScriptが必須なため、メーラーなどJavaScriptの実行を制限された環境だと使えない。</p>
<h1>クリックトラッキング</h1>
<p>続いてはクリックトラッキングについてです。ページやコンテンツの効果を測りたい場合、インプレッション数に加えて、実際にコンテンツをクリックした回数を計測することが必要になります。その時のクリックの計測方法も複数あります。</p>
<h2>リダイレクタ</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>メリット</h3>
<p>一般的なWebの仕組みに乗っているので、だいたいどこでも動く。</p>
<h3>デメリット</h3>
<p>余計な遷移を挟むため、ページ遷移が少し遅くなる。</p>
<h2>イベントハンドラ</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>メリット</h3>
<p>余計なページ遷移を発生させないで済む。</p>
<h3>デメリット</h3>
<p>別途clickハンドラが設定されているとかち合うことがある。<br>
JavaScriptが使えない環境では動かない。</p>
<h1>まとめ</h1>
<p>アクセス情報やクリック情報を計測するための技術を駆け足で見てきました。複数の計測の仕組みを作るのは大変ですが、正確な計測を行うためには環境に応じて技術を使い分ける必要があります。環境と計測内容から適切な計測方法を探し出してみてください。</p>
<p>CX（顧客体験）プラットフォーム「<a href="https://karte.io/">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。<br>
詳しくは<a href="https://plaid.co.jp/recruit/engineer.html">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects">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>


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

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

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

<html><head></head><body><p>こんにちは！エンジニアの@g0eです。4月1日にPLAIDに入社して、約4ヶ月が経過しました。<br>
まだまだ勉強することだらけですが、ようやくKARTEの開発環境にも慣れてきました。</p>
<p>本記事ではプレイドエンジニアの組織文化について、入社4ヶ月目のフレッシュな目線で書いてみようと思います。<br>
転職活動中でプレイドに興味がある、KARTEというプロダクトの裏にあるエンジニア文化に興味ある、といった人にとってなにかの参考になれば、と思います。</p>
<p>入社直後にも<a href="https://blog.plaid.co.jp/n/nc8cabf281d1e" target="_blank" rel="noreferrer">この記事</a>でもプレイドという組織について少し話をさせてもらっているので、もし興味がある方はこちらも合わせて読んでみて頂けると嬉しいです。</p>
<h2 id="プロダクトファースト">プロダクトファースト</h2>
<p>プレイドでは<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>というマーケティングツールの開発を行っています。自分が転職活動をする時にまず第一条件としてあげていたのが、自社開発の強いプロダクトを持っているという点だったのですが、やはりエンジニア文化を語るにあたっても、このKARTEというプロダクトを中心にエンジニア文化が形成されているという点は外せないかと思っています。</p>
<p>入社後の研修プログラムでも、まずはKARTEについての理解を深めるところから始まります。<br>
また、社内では<strong>ガチャ</strong>と呼んでいる仕組みがあって、プロダクトに関する不具合が見つかった場合や、エンジニア側での調査が必要な問い合わせがあった際に、その担当をエンジニアにランダムに割り当てる仕組み（厳密には順番なのでランダムではないのですが）があります。</p>
<p>普通に開発をしていると自分自身が書いたコードやその周辺領域以外はブラックボックスということが多いと思うのですが、それを意識的にバラしにいくという仕組みになっています。<br>
以下はガチャの担当が回ってきた時に自動的に割り当てられるissueにかかれているメッセージの一部です。</p>
<blockquote>
<p>bugfixを実際開発した人に回すのは基本的に最小限にする。キャッチアップも兼ねてbugfixは受け取った人がやること。分からない場合、どうしても時間がない場合はしょうがない</p>
</blockquote>
<p>自分も入社してしばらくしてこのガチャの担当に入れてもらったのですが、最初は初見のコードになかなか苦戦したものの、以下のようなメリットを感じています。（この仕組みは自社プロダクトを開発している会社では導入を検討する価値のある仕組みだと思います）</p>
<ul>
<li>自社プロダクトの（実装面だけではなく）仕様や使い方に対する理解が促進される</li>
<li>普段自分が担当している領域以外も含めたシステム全体像の理解が促進される</li>
<li>最初の実装を担当していたエンジニアへの確認などエンジニア間でのコミュニケーションが促進される</li>
<li>（クライアントからの調査依頼も含まれるので）、クライアントからの声に直接触れる機会を持てる</li>
</ul>
<h2 id="変化に対する柔軟性">変化に対する柔軟性</h2>
<p>マーケティングの世界はとにかく変化が激しい世界で、KARTEを取り巻く外部環境の変化も激しく、市場に合ったプロダクト開発を進めていくためには柔軟性やスピード感が非常に重要になってきます。プレイドでは、その変化に柔軟に対応できるようにいくつかの仕組みがあります。</p>
<p>まず最初に挙げられるのが、開発を行う際のサイクルについてです。社内では開発期間を2ヶ月毎に区切ってその1区切りを<strong>フォーカス</strong>と呼んで、フォーカス毎に各チームで達成したい目標を設定して、開発に取り組んでいます。2ヶ月という比較的短いサイクルで区切ることによって、短期間のうちに成果を出せるように意識的に動くことになります。<br>
当然、2ヶ月では終わらないような開発を行うこともあるのですが、その場合はフェーズを切る形で対応するなどして、短期・長期のバランスをとっています。</p>
<p>フォーカスは2〜5人程度で担当する機能毎にチームを組んで進めていくのですが、チームの組み換えもフォーカス毎に行うこととなり、人によっては2ヶ月で新しい機能開発を終えて、次の新規機能の開発に着手していくことになります。一部高い専門性が必要となる領域ではある程度メンバーが固定化されている部分もありますが、それでも一部のメンバーを入れ替えることで変化やチーム間での交流を促すような仕組みになっています。<br>
（席替えも月1回の頻度であり、基本的にはチームごとに近い席に座ることが多いのですが、毎月周りの景色が変わるというのもなかなか新鮮でした。）</p>
<p>次に挙げられるのが、<strong>創造のための破壊</strong>という点です。どのような会社やプロダクトであっても、技術トレンドの変化によって技術的負債の返済とは付き合い続けるものだと思います。特に技術的負債によって苦労したことがある人は、なるべく負債にならないようにと、技術選定にかなり時間をかけてしまうのではないでしょうか。</p>
<p>プレイドのエンジニア文化として強く感じたのは、『<strong>とりあえずやってみる</strong>』からの、『<strong>違うと思ったら作り直す</strong>』という文化です。同期入社の@kazuponさんの<a href="/pug_to_html/">エントリー</a>でもあったような、大規模な変更についても、かなりアグレッシブに取り組んでいます。<br>
これまで作ってきたものを躊躇なく破壊（作り直すことが）することができ、それを『<strong>承認より謝罪</strong>』の文化に則って進めることができることは、変化に対応し続けるためにも、スピード感を持ち続けるためにも、非常に重要な役割を担っているように感じます。<br>
（影響範囲の大きい変更を加えることは、なかなか大変で責任も伴うことですが、変え続けていくことを是として、失敗してもフォローし合える空気感を作ることが重要なのだと再認識しました。）</p>
<h2 id="生産性を高め続けること">生産性を高め続けること</h2>
<p>最後に、入社して感じたこととして、生産性を高めることへの意識が（これはエンジニアに限らず）全社的に非常に高いということです。</p>
<p>自社で（マーケティング）のツールを開発しているだけあって、世の中のSaaSサービスに対するアンテナが非常に高いというのもあると思うのですが、とにかく社内で色々なサービスを使って、色々な業務を自動化したり効率化したりという取り組みが行われています。（入社して一番最初の仕事がPCと社内で使っているサービスのセットアップなのですが、ここでまず社内で使っているサービスの豊富さに驚きました）</p>
<p>また、既存のサービスをうまく利用するだけでなく、無いものは自社で開発してしまったり、会社の制度も含めていかに効率化するか、というのが非常によく考えられています。<br>
一例にはなりますが、社内で生産性を高めるために行われている取り組みや制度を次に挙げてみました。リモートワークについては、突発的な問題への対応に限らず、集中作業日としてうまく活用している人も多いように感じます。（心なしか大雨の日はオフィスに人が少ないような気も…）</p>
<ul>
<li>毎日勤怠をつけるのが大変
<ul>
<li>→　会社のNWに繋ぐと自動的に勤怠を記録するシステムを自社開発</li>
</ul>
</li>
<li>毎月の経費精算が大変
<ul>
<li>→　前もって手当として定額を支給する<a href="https://atengagement.com/jinji-zukan/allowance/" target="_blank" rel="noreferrer">制度</a>を運用</li>
</ul>
</li>
<li>家庭の事情や天候不順で通勤が困難
<ul>
<li>→　リモートワークの制度をうまく活用</li>
</ul>
</li>
</ul>
<p>エンジニア(プログラマ)の美徳として『<strong>怠惰</strong>』であること、がよく挙げられ、自分自身もルーチンワークは苦手な方なのですが、いまのところ不満を感じずにエンジニアの美徳を貫いて作業に集中できる環境になっているように感じます。</p>
<p>やや働き方や働く環境的な話に寄ってしまったのですが、エンジニアとしての業務の進め方に関しても、上記の様な生産性を強く意識した環境になっています。最初の項目で挙げたガチャの仕組みはslack上のボットにより自動化されていたり、ビジネス職の方からの依頼や相談もすべてgithub上のissueに集約される形になっていて、基本的にはコードとgithubとslackがあれば通常の業務は回せるようになっています。</p>
<p>良い側面ばかりを書いてきたのですが、当然、これらの生産性を高めるための取り組みの裏側には、それだけのアウトプットが求められ続けていることや、そのためのセルフマネージメントが要求されるということを、忘れてはいけないな、とも思います。</p>
<h2 id="最後に">最後に</h2>
<p>最後まで読んで頂いてありがとうございます！<br>
いかがでしたでしょうか？プレイドのエンジニア文化に興味を持って頂けたでしょうか？</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>

こんにちは！エンジニアの@g0eです。4月1日にPLAIDに入社して、約4ヶ月が経過しました。
本記事ではプレイドエンジニアの組織文化について、入社4ヶ月目のフレッシュな目線で書いています。

入社4ヶ月で感じたプレイドエンジニアの組織文化 | PLAID engineer blog

入社4ヶ月で感じたプレイドエンジニアの組織文化

1,100 超えコンポーネントの Jade / Pug テンプレートを移行した話 | PLAID engineer blog