サーバサイドでのペイウォール実装

サーバサイドでのリクエストの実行

CCEのクライアントサイドスクリプト cx.cce.js でCCEのウィジェットを呼び出す場合には /public/widget/data を必要なパラメータでコールします。サーバサイトでこのAPIを実行する場合には、必要なパラメータをそれぞれ以下のように適切に付与する必要があります：

User ID: ブラウザの cX_P クッキーに保持されたユーザID。Cxenseが使用するクッキーについての詳細はユーザートラッキングとプライバシーをご参照ください。
Widget ID: キャンペーンセットのID。キャンペーンセットIDは Settings メニュー内で確認できます。
Current URL: 今ユーザが見ているページのURL。アクセスしているページ情報を元にキャンペーンを配信する場合やコンテンツマッチによるレコメンドのために必要な情報です。
Referrer URL: ユーザが直前に見ていたページのURL。ユーザの流入元（ソーシャルからの流入、検索からの流入、など）を元にしたターゲティングに使用します。
Page View Tracking ID: ページビューイベントのID。詳細は下記参照。
IP of the user: IPに基づく、ジオターゲティングを行えるようにするには、X-Forwarded-for HTTPヘッダーを使用して、ユーザのIPアドレスを知る必要があります。

ページビューのトラッキング

ページビューが発生する前にサーバーサイドでペイウォールの判断を行う場合、以下のような手順を踏んでページビューとペイウォールリクエストとが紐付けられるようにする必要があります（正確なレポートのため）。

サーバ側でページビューイベントIDを生成します。これには cx.js の _randomString メソッドを流用することができます：

_randomString: function() {
            var randomString = (new Date().getTime()).toString(36);
            while (randomString.length < 16) {
                randomString += Math.round(Math.random() * 2147483647).toString(36);
            }
            return randomString.substr(0, 16);
        },

サーバーサイドで /public/widget/data をコールする際の prnd パラメータにここで生成したイベントIDを指定します。
さらにこのIDをクライアントサイドに渡し、ページビューイベント送信前に cX オブジェクトにIDをセットします：
```
cX.setRandomId('<ランダムID>')
```

Code examples

クライアントサイドのページビュートラッキングタグサンプル：

var cX = window.cX = window.cX || {}; cX.callQueue = cX.callQueue || [];
cX.CCE = cX.CCE || {}; cX.CCE.callQueue = cX.CCE.callQueue || [];
cX.callQueue.push(['setRandomId', 'dBkisF2QvPMEsj3n']); // サーバーサイドで生成したID
cX.callQueue.push(['setSiteId', '9222302702321341959']);
cX.CCE.callQueue.push(['sendPageViewEvent', 'cxd', 'e82d54084417a56367924838b765d12304d883e9']);

ウィジェットリクエストオブジェクトのサンプル:

JSON object
{
	"context":{
			"referrer":"https://www.previous.url", 
			"url":"https://www.current.url"¨
	},

	"widgetId":"<ウィジェットID>",
	"user":{"ids":{"usi":"<cX_P cookie の値>"}},
	"prnd":"<サーバーサイドで生成したID>"
}

このリクエストを https://api.cxense.com/public/widget/data に送信します。"json" パラメータで GET で送るか、JSONオブジェクトを POST してください。

GETリクエストのサンプル：

https://api.cxense.com/public/widget/data?json=%7B%22context%22%3A%7B%22referrer%22%3A%22https%3A%2F%2Fwww.previous.url%22%2C%20%22url%22%3A%22https%3A%2F%2Fwww.current.url%22%7D%2C%22widgetId%22%3A%22%3Cwidgetid%3E%22%2C%09%22user%22%3A%7B%22ids%22%3A%7B%22usi%22%3A%22%3Cvalue%20of%20cX_P%20cookie%3E%22%7D%7D%2C%22prnd%22%3A%22%3Cserver%20side%20generated%20id%3E%22%7D

Custom User Data を追加する場合、マッチするためにはキーを小文字にする必要があります。全てのキーが小文字であるため、カテゴリ上の大文字は CCE 画面上でマッチしません。 Custom User Data を含むリクエストのサンプルは以下の通りです。

JSON object
{
	"context":{
			"referrer":"https://www.previous.url", 
			"url":"https://www.current.url",
			"categories":{
				"subscriber":"yes"
			},
			"parameters":[
				{
					"key":"subscriber",
					"value":"yes"
				}
			]
	},

	"widgetId":"<ウィジェットID>",
	"user":{"ids":{"usi":"<cX_P cookie の値>"}},
	"prnd":"<サーバーサイドで生成したID>"
}

ウィジェットリクエストをJSONオブジェクトでPOSTする場合、リクエストヘッダに Content-Type: application/json を明示してください。

結果セット

上記APIコールの結果セットについては /public/widget/data を参照してください。CCEの場合、結果はデフォルトのキーと値との組が含まれます。

フリーアクセス

記事がそのユーザに対してオープンの場合（ユーザがその記事の閲覧権限がある場合）、APIの結果には "type": "free" を含むアイテムが含まれます：

{  
   "items":[  
      {  
         "type":"free",
         "campaign":"1"
      }
   ],
   "template":"",
   "style":"",
   "head":""
}

サーバーサイドでペイウォールを判定する場合、APIの結果が "free" ではない種類のアイテムの場合はその記事はロックされている（そのユーザは閲覧できない）と判断することになります。

ペイウォール判定ではなく、プロモーションや記事レコメンドを返す場合には、"items"にはプロモーションのメタデータ（画像、タイトル、URLなど）が含まれます。これらはサーバーサイドでレンダリングするか、後述のクライアントサイドでのスクリプトでレンダリングすることもできます。

クライアントサイドでのレンダリング

サーバーサイドでリクエストしたウィジェットの結果を、Cxenseのレンダリングテンプレートを用いてレンダリングすることが可能です。/public/widget/data の結果をページのスクリプト変数に書き込むためには cX.insertWidget 内の renderFunction に返されたデータオブジェクトをシミュレーションします。変数上で cX.CCE.render 関数を使用して、全てのCCE機能が確実に認識されるように処理します。

   <script type="text/javascript">
        // {"response":{} } にラップされた /public/widget/data の結果
        window.cx_widgetData = { "response": {"items":[{"type":"free","campaign":"24"}], "template": ""} };

		// 結果があれば描画
        if (window['cx_widgetData']) {
            cX.CCE.callQueue.push(['render', 'cx_paywall', window['cx_widgetData']]);
        }

   </script>

Last updated: September 02, 2024