無限スクロールページを実装した際のPiano InsightでのPV計測方法

概要

記事ページにおいて、記事下までスクロールした時点で、次の記事ページをページの再描画（ページ遷移）なしに表示する無限スクロールと呼ばれる手法があります。

この手法を利用した際に、よく課題となる次の記事ページが表示された際に、PV情報を送信できるようにするための方法について説明します。

背景

Piano Insightでは、タグ中の以下の行にてPVを送信しています。

PVを送信している行

cX.callQueue.push(['sendPageViewEvent']);

Cxense Insight タグ

Piano Insightでは、1ページで多重カウントを防止するために、

以下のように、タグ中に複数のPVを送信する処理を記載しても、初回の1度のみしかサーバへPV情報は送信されません。

そのため、ページの再描画（ページ遷移）なしにPV情報を送信するためには、

別途Piano Insightタグに処理を追加する必要があります。

方法については、以下のセクションに記載します。

「ページの再描画（ページ遷移）なしにPV情報を送信する方法」

また、上記処理を追加し、PV情報を送信できるようになったあと、以下のような問題が発生することがあります。

現象：

次ページが読み込まれたPVを送信したとき、最初の記事ページ（現在のURL)に対して発生してしまう

発生条件：

次ページの記事を表示した際に、HTML5のhistory APIを利用して現在のURLを変更していない場合

こちらを解決する方法は以下のセクションにて記載させていただきます。

「指定したURLに対して、PVをカウントする方法」

対応方法

ページの再描画（ページ遷移）なしにPV情報を送信する方法

次ページ読み込み時に、以下のスクリプトを実行してください。

　　cX.callQueue.push(['initializePage']); // <-- この行を挿入することで、再描画なしにPV情報を送信できるようになります。 cX.callQueue.push(['setSiteId', '1234']); // <-- ご自身のサイトIDを入力してください。 cX.callQueue.push(['setCustomParameters', { 'infinity': 'true'}]); // <-- この行を追加することで、無限スクロールにおいて発生したPVかどうかをPiano Insight上で確認することができます。 cX.callQueue.push(['sendPageViewEvent']);

注意

もし、カスタムパラメータなどを付与する際には、適宜上記スクリプトのcX.callQueue.push(['sendPageViewEvent']);よりも前の行に追加してください。

cX.callQueue.push(['sendPageViewEvent']);よりも後の行に記載しても、そのカスタムパラメータなどは送信されません。

指定したURLに対して、PVをカウントする方法

以下の対応方法があります。

HTML5のHistoryAPIを利用して、現在のURLを変更する　⇒ 弊社サービスに依存しない方法なので、本ページでは割愛させていただきます。
Piano Insightタグにて、カウントしたいURLを指定する

2. については、以下の手順にて実現できます。

sendPageViewEventにlocationパラメータを付与します。

次ページ読み込み時に、以下のスクリプトを実行してください。

概要
背景
対応方法
- ページの再描画（ページ遷移）なしにPV情報を送信する方法
- 指定したURLに対して、PVをカウントする方法

Last updated: March 25, 2020