計測チュートリアル

概要

計測とは量を測定するためにいくつかの測定機器を使う際に使われる一般的な用語です。時計、メジャーカップ、メジャーテープは日々計測で使われている機器の最たる例です。計測という用語はソフトウェア業界でもよく使われていますが、その場合は計測機器というよりはむしろ、計測技術の形式に基づいています。以下では関数が実行されて時間を測定するようなソフトウェア計測の非常にシンプルな例を見ていきます。

startTime = time.time()
myFunction()
stopTime = time.time()
print("The function completed in " + str(stopTime - startTime) + " ms")

Cxense製品を実装するための最も共通の動機付けとして以下のようなものがあると思います。

特定のCxense製品を購入される際のROIは何ですか？Cxenseを利用した結果、より多くのページビュー、より多くのコンバージョン、より深いユーザーエンゲージメントなどの結果をもたらしますか？
ある機能の設定は同じ機能を持った他製品の設定よりもパフォーマンスとして優れていますか？劣っていますか？
他製品よりもトラフィックを増加させるようなコンポーネントがありますか？

計測の組み込み

Cxense製品のいくつかは計測が組み込まれているものや計測を容易にするフレームワークを持っています。

左のようにCxense Insight GUIはフィルタ機能があり、これを使ってコンテンツのサブセットやユーザーのトラフィックにドリルダウンすることができます。右のようにCxense Content レコメンデーションの実績レポートを見ることもできます。

ワークスペースでの計測

Cxense Content レコメンデーションではいわゆる外部ワークスペースウィジェットが準備されており、サイトとコンテントレコメンドウィジェットに適用させることができます。最初のステップでは以下の矢印で示されているようなウィジェットを作成していきます。

（ウィジェットボタンの追加をクリックした後）次にウィンドウに現れる、単一の入力フィールドに下記のURLをコピーして表示をクリックします。これによってワークスペースを囲っているGUIフレームワークで選択されているサイトグループの全てのウィジェットの概要が表示されます。

https://onboarding.cxense.com/public/insight-widgets/content-performance.html?siteId={{site}}&siteGroupId={{group}}&clk=dmp:click&imp=dmp:impression&start={{start}}&stop={{stop}}&filter={{filter}}&totalonly=true

次のURLでは特定のウィジェットの詳細が表示されます。ワークスペースウィジェットにURLを貼り付ける前に、 <SITEID> と <WIDGETID>を実際のサイトIDとCxenseコンテンツウィジェットIDに置き換えてください。

https://onboarding.cxense.com/public/insight-widgets/content-performance.html?siteId=<SITEID>&widgetId=<WIDGETID>&clk=dmp:click&imp=dmp:impression&start={{start}}&stop={{stop}}&filter={{filter}}

二番目のURLを適用した後に外部ワークスペースウィジェットには以下のような統計が見られるようになります。

エクササイズ: アクティブなコンテントレコメンドウィジェットを持つサイトグループにアクセスできるようでしたら、両方の統計情報（全体と特定のサイト/ウィジェット）を表示するような外部ワークスペースを作成してみましょう。

カスタム計測

このセクションでは独自の追加計測を加えていきます。以下のような方法で実施できます。

メタタグを使う
カスタムパラメータを使う
URLパラメータを使う

メタタグを使う

カスタム計測で最も簡単な形式はCxenseメタタグを使って、コンテンツの個別性を基にしてページをマークすることです。こちらの非常に典型的な使用例は、ペイウォールの内部または外部のいずれかをページにマークするというものです。Cxenseメタタグはこちらで説明されています。3文字コードの xyz はカスタマープリフィクスのためのプレースホルダーです。

<meta name="cXenseParse:xyz-access" content="free"/>
<meta name="cXenseParse:xyz-access" content="paid"/>

2つのタイプのページビュー数はCxense Insight の画面の左側にある様々なフィルタを使って読み取ることができます。

エクササイズ: サイト内のペイウォールのメタタグを追加し、登録されたタグのあるページを再クロールしてから、画面のフィルタ内にタグの値が表示されるか確認しましょう。

カスタムパラメータを使う

上のセクションでは各ページに1つの静的な値で終わり、一人のユーザー訪問と別のユーザーの訪問に違いはありません。そのページは無料のページであったか、読んだら支払いをしなければならないページでした。しかしながら、もしコンテンツをある訪問と別の訪問とで変えるかもしれないなら、メタタグを使うことはできません。次の例ではある訪問と別の訪問とで変化するコンテンツに直面します。

次の例ではアンカーテキストの色がどのくらいクリックに影響をもたらすかを調べたいと考えたとします。

以下のWebページのコードはテストする色のリストを持っています（5行目）。誰かがページを開くたびに、テストカラーのセットの中から1つの色がランダムに選択されます。その色はカスタムパラメータとしてページビューデータに追加され(11行目)、Cxense Insight にアップロードされます(12行目）。同じ色が25行目と21行目のコードで、26行目でアンカー要素に設定されています。

<html>
   <head>
      <script>
         // テストの色はランダムにテストカラーのセットから選択されます
         var testColors = ['red', 'green', 'blue', 'yellow', 'purple'];  
         var testColor = testColors[Math.floor(Math.random() * testColors.length)];

         // テストカラーは ページビューデータと一緒に Cxense にレポートされます
         var cX = cX || {}; cX.callQueue = cX.callQueue || [];
         cX.callQueue.push(['setSiteId', '9222364973424511877']);
         cX.callQueue.push(['setCustomParameters', { 'color': testColor }]);
         cX.callQueue.push(['sendPageViewEvent']);

         // Cxense cx.js ライブラリを非同期でロードします
         (function(d,s,e,t){e=d.createElement(s);e.type='text/java'+s;e.async='async';
         e.src='http'+('https:'===location.protocol?'s://s':'://')+'cdn.cxense.com/cx.js';
         t=d.getElementsByTagName(s)[0];t.parentNode.insertBefore(e,t);})(document,'script');

         //アンカーテキストは選択されたテストカラーをセットします
         function onLoad(color) {
            document.getElementById("testLink").style.color = color;
         }
      </script>
   </head>
   <body onload="onLoad(testColor)">
      <a id="testLink" href="nextPage.html">Link to next page</a>
   </body>
</html>

以下では Cxense Insight のフィルタオプションを見ていきます（Cxense Inght 画面の左側に配置されています）。2つの赤い箇所は上の26行目のアンカー要素（リンク）に関連するページビューデータを示しています。上の方は"next page"として26行目で参照されたページのページビューとしてフィルターできます。下の方はテストカラーとそれぞれがどのくらい選択されたかのパーセンテージを保持しています。(上の11行目でレポートされています）。上の赤い箇所で離脱URLを設定し、下の赤い箇所で色を選択することで、どの色が最もインプレッションあるいはユニークユーザーをもたらしたかを確認することができます。

フィルタを使いこなすことで望んだ結果を得ることはできますが、情報を取得する方法としてあまりユーザーフレンドリーではありません。同じ情報を自動的に取得するワークスペースを作成した方が良いでしょう。以下ではアンカーテキストのクリック数を示す色ごとの1つのウィジェットをワークスペースに作成しています（ワークスペースに詳しくない場合、ワークスペースチュートリアルでセットアップ方法を学ぶことができます）。

ワークスペースを作成し終えると以下のように確認ができます

エクササイズ: テストページを公開して、それぞれの色のクリック数を示すカスタムワークスペースを作成してみましょう。

URLパラメータを使う

この例では上の例のURLパラメータと同じカスタムパラメータの color をどのように追加するかを学んでいきます。同じパラメータでURLのバージョンではプレフィックスの cx_ があります。

Webページの新しいバージョンではテストカラーごとに1つ、リンクを追加しました。各リンクがURLパラメータ cx_color を hrefHTML で付与される URLにどのように追加するかを注意して見てください。

<html>
   <head>
      <script>
         var cX = cX || {}; cX.callQueue = cX.callQueue || [];
         cX.callQueue.push(['setSiteId', '9222364973424511877']);
         cX.callQueue.push(['sendPageViewEvent']);

         (function(d,s,e,t){e=d.createElement(s);e.type='text/java'+s;e.async='async';
         e.src='http'+('https:'===location.protocol?'s://s':'://')+'cdn.cxense.com/cx.js';
         t=d.getElementsByTagName(s)[0];t.parentNode.insertBefore(e,t);})(document,'script');
      </script>
   </head>
   <body>
      <a style="color:red" href="nextPage.html?cx_color=red">Link to next page</a> <br>
      <a style="color:green" href="nextPage.html?cx_color=green">Link to next page</a> <br>
      <a style="color:blue" href="nextPage.html?cx_color=blue">Link to next page</a> <br>
      <a style="color:yellow" href="nextPage.html?cx_color=yellow">Link to next page</a> <br>
      <a style="color:purple" href="nextPage.html?cx_color=purple">Link to next page</a> 
   </body>
</html>

エクササイズ: 上記をパラメータ名を cx_color2 に変更してページに実装し、前のエクササイズで取得したデータと混在しないようにします。

URLパラメータの実装は必ずしも私たちが記述している（またはコントロールしている）Webページコードに由来する必要はありません。以下ではGoogle DFP広告のクリックURLに上記と同じパラメータ color にred を追加する方法を示しています。

The instrumentation URL parameters do not necessarily need to stem from web page code that we are writing (or in control of). Below you see how the same red color parameter we added to our code above can be added to the click URL of a Google DFP ad:

標準カスタムパラメータ

標準カスタムパラメータについて説明することは矛盾しているように聞こえます。「カスタム」の何が「標準」なのでしょうか？しかしこの用語は、Cxenseが従来のカスタムパラメータを繰り返し使用して、同じことを計測するという事実に由来しています。これらの「予約済み」カスタムパラメータを以下に示します。

タグ/パラメータ/キー名称	想定している利用法
cx_source	Cxense Content で使用され、コンテンツレコメンデーションウィジェットがクリックされた結果である全てのページビューをトラッキングします(cx_source の値は cxrecs がセットされます）。Cxense と競合製品との間でA/Bテスティングのために、競合のコンテンツレコメンデーションを追加するには以下のようにします `<a href="competitorRecommendation.html?cx_source=competitor">Our competitor recommends this!</a>`
cx_navSource	ユーザーがどこ（どのページコンポーネント）から次のページに行くかをトラッキングします。 `<a href="nextPage.html?cx_navSource=fronttop">Next page</a> <a href="nextPage.html?cx_navSource=trendingwidget">Next page</a>`
cx_campaign	広告キャンペーンのパフォーマンスをトラッキングします。 `<a href="adLandingPage.html?cx_campaign=summerfashion2016">Landing page</a>`
cx_creative	クリエイティブのパフォーマンスをトラッキングします。 `<a href="adLandingPage.html?cx_creative=drinkingcokeflash">Landing page</a>`
cx_tag	付与されたレコメンデーションを配信したのはコンテンツのブランチのどのタイプであるかをトラッキングします。 `clickUrl = item.click_url + '?cx_tag=' + tag;` このタグはコンテンツレコメンデーションのパフォーマンス画面で見るために、こちらで説明されているようなコンテンツレコメンデーションのコンテンツコンフィグを介して挿入できます。上のように追加すると、Cxense Insight に表示されるようになります。
cx_artPos	コンテンツレコメンデーションのウィジェットにて配置場所ごとのパフォーマンスを計測します。カルーセルは典型的な使用例です。 `clickUrl = item.click_url + '?cx_artPos=' + i;`
<customer_prefix>-access	ドキュメントがペイウォールだったかどうかをトラッキングします。 `<meta name="cXenseParse:xyz-access" content="free"/> <meta name="cXenseParse:xyz-access" content="paid"/>`
subscriber	ユーザーの購読状況をトラッキングします。 `cX.callQueue.push(['setCustomParameters', { 'subscriber': subscriberStatus }]);` subsriberStatusは購読者、非購読者、登録済、解約済などの値を保持します。 The subsriberStatus would hold values such as subscriber, nonsubscriber, registered, expired, etc.
cx_channel	Facebook Instant Articles をトラッキングします。 `cX.callQueue.push(['setCustomParameters', { 'cx_channel': 'facebook' }]);`

Last updated: January 25, 2022