バーチャルページビューの設定方法 （URLが変わらないページの計測）

会員登録フォームなどでURLが変わらないページのヒートマップ計測を行うためには、利用者側で以下の作業をしていただく必要がございます。

例として、今回は以下のようにフォームが変わらないURLを参考に設定しましょう。
https://example.com/vpv/form.html

そして、複数存在しているHTMLのページが以下のファイルで構成されているとします。

入力開始ページ：　form1.html
確認ページ　　：　form2.html
登録完了ページ：　form3.html

各htmlファイルに解析コード設定 #

Note：ページが変わってもPtengine解析コードのjsファイルが再度読み込まれない、またはサイトに貼り付けているPtengineの解析コードが一行タグになっている場合、サイトのロジックかGTM経由で設定に従って設定してください。
一行の解析コード：<script src="https://js.ptengine.jp/xxxxxxxx.js"></script>

• 1それぞれ３つのファイルに、Ptengineの解析コードを入れます（xxxxxxxx の部分は各プロジェクトに紐づいた独自のIDとなります）

  <script type="text/javascript">
      window._pt_lt = new Date().getTime();
      window._pt_sp_2 = [];
      _pt_sp_2.push('setAccount,xxxxxxxx');
      var _protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
      (function() {
          var atag = document.createElement('script'); atag.type = 'text/javascript'; atag.async = true;
          atag.src = _protocol + 'js.ptengine.jp/pta.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(atag, s);
      })();
  </script>
  

• 2上記の解析コードにある
  ｢_pt_sp_2.push(‘setAccount,xxxxxxxx’);｣というコードの下に、
  それぞれのページファイル別に以下の様に任意のURLを入れたコードを差し込みます。

  form1.htmlに既述する仮想URLタグ

  _pt_sp_2.push('setPVTag,https://example.com/vpv/form.html/input1,replace');
  

  form2.htmlに既述する仮想URLタグ

  _pt_sp_2.push('setPVTag,https://example.com/vpv/form.html/input2,replace');
  

  form3.htmlに既述する仮想URLタグ

  _pt_sp_2.push('setPVTag,https://example.com/vpv/form.html/input3,replace');
  

  例えば、form1.htmlには追加するのは、以下の解析コードとなります。

  <script type="text/javascript">
      window._pt_lt = new Date().getTime();
      window._pt_sp_2 = [];
      _pt_sp_2.push('setAccount,xxxxxxxx');
      _pt_sp_2.push('setPVTag,https://example.com/vpv/form.html/input1,replace');
      var _protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
      (function() {
          var atag = document.createElement('script'); atag.type = 'text/javascript'; atag.async = true;
          atag.src = _protocol + 'js.ptengine.jp/pta.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(atag, s);
      })();
  </script>
  

  これと同様にform2.html、form3.htmlにも仮想ページの一行のコードをそれぞれ追加することで、同じURLを別々のページとして数値を計測することができるようになります。

サイトのロジックかGTM経由で設定 #

ページが変わってもPtengine解析コードのjsファイルが再度読み込まれない、またはPtengineの解析コードが一行のタグになっている場合、こちらで紹介するサイトのロジックに直設定またはGTM経由での設定方法に従って設定してください。

サイトのロジックに直接設定：
ページが変わるタイミングで以下タグを呼び出すように直接サイトのロジックに仕組む必要があります。

_pt_sp_2.push('setPVTag,https://example.com/vpv/form.html/input1,replace');

GTM経由で設定：
該当するページでHistory Changeをご利用して頂いている場合、GTMの「履歴の変更」というトリガーで簡単にタグを設定することが可能です。HTMLにバーチャルページビューのタグを入れた上、トリガーを「履歴の変更」で設定してください。

補足事項 #

また追加のコードのそれぞれの意味はこちらになります。