カスタムのページ閲覧メトリックを作成する方法

このページで学べること

カスタム メトリック「Viewed Page」を作成する方法と、お客様がサイト上の非商品ページにアクセスするタイミングを把握する方法を確認してください。

始める前に

続行する前に、トラッキングしたい各ページにKlaviyoのオンサイトJavaScript（Klaviyo.js）がインストールされていることを確認してください。Shopifyの場合は、スタートガイドを使用してストアを連携し、オンサイトトラッキングを有効にしてください。その他のサイトの場合は、Klaviyoオンサイトトラッキングのスタートガイドに従ってください。以下のスニペットでは、Klaviyo.jsを使用してイベントをアカウントに送信します。

追跡したい各サイトページに、Viewed Page メトリック用の次の JavaScript コードスニペットを追加することが重要です。このスニペットは、ランディングページとその他のサイトページの両方で機能します。

スニペットのインストール

1. トラッキングしたい各ページに、以下の完全なスニペットをコピー＆ペーストしてください。公開する前に、以下の説明に従ってページ名と任意のイベント名をカスタマイズするか、代替URLスニペットを使用してください。
2. 次に、更新したコードでウェブサイトのファイルを保存して公開します。

<script type="text/javascript"> 
//Script to initialize Klaviyo object on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script type="text/javascript"> 
//Script to track viewed page
klaviyo.track("Viewed Page", {           
   PageName: "About Us"   
}); 
</script>

このスニペットを含むページを識別済みの訪問者が閲覧すると、KlaviyoはカスタムViewed Pageメトリックのイベントを記録し、PageNameの値として「About Us」を設定します。

値「PageName」を変更

上の例の値を変更して、サイト上の別のページ名を表すことができます。

1. 例の"[会社概要]"の値を削除します。
2. 引用符内に、希望のテキストを追加します。たとえば、ブランドストーリーのページへの訪問をトラッキングしたい場合は、代わりに "Customer Stories" を値として使用できます。

Viewed Pageイベント名の変更

Viewed Pageイベント名を別の名前（例：Visited Page、Tracked Pageなど）に変更できます。

1. 例の閲覧ページイベント名を削除してください。
2. 引用符内に含まれる目的のテキストを追加します。

URL 別の [閲覧したページ] を追跡

ページ名ではなくURLでViewed Pageを追跡するには、最初のスニペットの代わりに、以下の代替スニペットを使用してください。window.location.hrefは、引用符なしで、表示されているとおりに正確に維持してください。閲覧者が表示しているページのURLにurlプロパティが自動的に設定されます。

<script type="text/javascript"> 
//Script to initialize Klaviyo object on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script type="text/javascript"> 
//Script to track viewed page
klaviyo.track("Viewed Page", {           
      url: window.location.href   
}); 
</script>

閲覧ページのトラッキングをテストする

Viewed Pageのトラッキングが機能しているかテストするには、ページが公開済みであることを確認してください。youremail@example.comをご自身のテスト用メールアドレスに置き換えて、?utm_email=youremail@example.comをページURLに追加してください。URLにすでに?が含まれている場合は、代わりに&utm_email=youremail@example.comを使用してください。#フラグメントより前にパラメータを追加し、その後ページを再読み込みして、ブラウザを識別し、訪問をトラッキングします。

1. ページにアクセスしたら、Klaviyo アカウントに移動します。
2. [分析]>[メトリック] に移動します。
3. 上のフィールドで「ページ閲覧」（または、このメトリックに使用している別の名前）を検索します。

4. Viewed Pageメトリック（または使用している任意のメトリック）をクリックします。
5. アクティビティフィードタブを選択します。テスト用プロファイルのイベントを見つけます。メニューを開き、アクティビティの詳細を選択して、ページ名またはURLが訪問したページと一致していることを確認します。

アクティビティを確認できる場合は、メトリックが正常にトラッキングできています。アクティビティが表示されない場合は、Klaviyoでページを再読み込みしてみてください。それでも表示されない場合は、Klaviyo.jsと選択したスニペットが公開済みのページにインストールされていることを確認し、テスト用メールアドレスでそのページに再度アクセスしてください。Shopifyの場合は、以下の同意要件も確認してください。

その他のリソース