Googleアナリティクスでコンテンツエンゲージメントを追跡する

デフォルトでは、Googleアナリティクスでは、訪問者とサイトコンテンツの相互作用の追跡は非常に簡単です。 標準のトラッキングコードを使用すると、訪問者がページで費やした時間（サイト滞在時間）、直帰率、ページビューなどのさまざまな情報を受け取ることができます。



ただし、このデータでは十分でない場合があります。 たとえば、記事やさまざまな出版物にメインコンテンツが含まれているブロガーやサイトの場合、これらの指標では不十分な場合があります。



各メッセージまたは記事の詳細情報を受け取りたいです。 人々はコメントを読んだり、記事を投稿したりしますか？ タブで複数の投稿を開きますか？

Webサイトの訪問者が各ページとどのようにやり取りするかについての詳細情報を取得する最良の方法は何ですか？



この記事では、カスタムのGoogleアナリティクストラッキングコード（GA）を使用して、コンテンツとのエンゲージメントの程度を測定する方法について説明します。

事業目標

上で述べたように、私たちの目標は、訪問者がサイトの各ページをどのように操作しているかをよりよく理解することです。 Thomas Baekdalによって提案された目標を使用して、以下を追跡します。

• ページをスクロールする人の数。
• 人がスクロールを開始するとき;
• 人が記事の終わりに達したとき（ページの終わりではなく、記事またはメッセージが終わる領域）;
• どの訪問者が単に記事を閲覧し、どの記事を読んだか。

重要性について考えてください！ 本当に読んだ記事の数を正確に測定することができます。 訪問者がどの記事でコメントを読み、ページの最後に到達するかを見ることができます。

追跡技術

上記のすべては、標準のGA イベント追跡機能を使用して追跡できます。 一番下の行は、特定のアクションが発生したときにイベントを登録するということです。 ページへの訪問者によるスクロールに基づいてイベントを登録します。



GAイベントトラッキング機能には、カテゴリ、アクション、ラベル、値、および非表示カウンター（カテゴリ、アクション、ラベル、値、暗黙的なカウント）の5つのコンポーネントが含まれます。 GAレポートに表示するデータを定義する必要があります。



読書に関連するすべてのアクティビティを1つのカテゴリにまとめ、このカテゴリを読書と呼びます。



このカテゴリには4つの主なアクションがあります。

• 記事の読み込み：記事がブラウザに読み込まれた回数を測定します。 一般に、これはページビュー数（標準ページビュー）の別のカウンターです。 このイベントは、追跡しようとしている他のイベントのコンテキストを理解するのに役立ちます。
• 読み取り開始：訪問者がページを下にスクロールしたときを追跡します。 訪問者がページを150ピクセル下にスクロールすると発生します。 この値は変更できます。 また、ページのスクロールを開始してから経過した時間を追跡します。
• コンテンツ下部：訪問者が記事の最後に到達したときを追跡し、記事の最初から最後までスクロールするのにかかる時間を追跡します。
• ページ下部：訪問者がページの最後に到達した時間と、それがどのくらいかかったかを追跡します。

その他の重要な情報は、タイトルとページURLです。 訪問者にとって最も興味深い記事を特定し、どの記事が視聴者のさらなる関与に影響するかを特定するために、これらのデータが必要です。 GAはURLとページタイトルを自動的に追跡するため、これをイベントに追加する必要はありません。



また、カスタム変数を使用して、グループごとに訪問者を区別します。 訪問者がページの最後に到達するまでに60秒もかからなかった場合、この訪問者をスキャナーグループに割り当てます。 しかし、訪問者がページの最後に到達するのに60秒以上かかった場合は、読者グループに入れてください。



最後に、イベントを目標として設定します。 記事の最後に到達した人には1つの目標を設定し、ページの最後に到達した人には1つの目標を設定します。 これは、これらのアクティビティを完了した訪問者の割合を取得する簡単な方法です。

コード

まず、jQueryライブラリを使用します。 サイトでjQueryライブラリが有効になっていることを確認してください。



以下はコードです。自由にコピー、変更、共有してください。 このコードに貢献した人々を忘れないでください！

 jQuery(function($) { // Debug flag var debugMode = true; // Default time delay before checking location var callBackTime = 100; // # px before tracking a reader var readerLocation = 150; // Set some flags for tracking & execution var timer = 0; var scroller = false; var endContent = false; var didComplete = false; // Set some time variables to calculate reading time var startTime = new Date(); var beginning = startTime.getTime(); var totalTime = 0; // Track the aticle load if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ArticleLoaded', '', , true]); } // Check the location and track user function trackLocation() { bottom = $(window).height() + $(window).scrollTop(); height = $(document).height(); // If user starts to scroll send an event if (bottom > readerLocation && !scroller) { currentTime = new Date(); scrollStart = currentTime.getTime(); timeToScroll = Math.round((scrollStart - beginning) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'StartReading', '', timeToScroll]); } else { alert('started reading ' + timeToScroll); } scroller = true; } // If user has hit the bottom of the content send an event if (bottom >= $('.entry-content').scrollTop() + $('.entry-content').innerHeight() && !endContent) { currentTime = new Date(); contentScrollEnd = currentTime.getTime(); timeToContentEnd = Math.round((contentScrollEnd - scrollStart) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ContentBottom', '', timeToContentEnd]); } else { alert('end content section '+timeToContentEnd); } endContent = true; } // If user has hit the bottom of page send an event if (bottom >= height && !didComplete) { currentTime = new Date(); end = currentTime.getTime(); totalTime = Math.round((end - scrollStart) / 1000); if (!debugMode) { if (totalTime < 60) { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Scanner', 2]); } else { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Reader', 2]); } _gaq.push(['_trackEvent', 'Reading', 'PageBottom', '', totalTime]); } else { alert('bottom of page '+totalTime); } didComplete = true; } } // Track the scrolling and track location $(window).scroll(function() { if (timer) { clearTimeout(timer); } // Use a buffer so we don't call trackLocation too often. timer = setTimeout(trackLocation, callBackTime); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jQuery(function($) { // Debug flag var debugMode = true; // Default time delay before checking location var callBackTime = 100; // # px before tracking a reader var readerLocation = 150; // Set some flags for tracking & execution var timer = 0; var scroller = false; var endContent = false; var didComplete = false; // Set some time variables to calculate reading time var startTime = new Date(); var beginning = startTime.getTime(); var totalTime = 0; // Track the aticle load if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ArticleLoaded', '', , true]); } // Check the location and track user function trackLocation() { bottom = $(window).height() + $(window).scrollTop(); height = $(document).height(); // If user starts to scroll send an event if (bottom > readerLocation && !scroller) { currentTime = new Date(); scrollStart = currentTime.getTime(); timeToScroll = Math.round((scrollStart - beginning) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'StartReading', '', timeToScroll]); } else { alert('started reading ' + timeToScroll); } scroller = true; } // If user has hit the bottom of the content send an event if (bottom >= $('.entry-content').scrollTop() + $('.entry-content').innerHeight() && !endContent) { currentTime = new Date(); contentScrollEnd = currentTime.getTime(); timeToContentEnd = Math.round((contentScrollEnd - scrollStart) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ContentBottom', '', timeToContentEnd]); } else { alert('end content section '+timeToContentEnd); } endContent = true; } // If user has hit the bottom of page send an event if (bottom >= height && !didComplete) { currentTime = new Date(); end = currentTime.getTime(); totalTime = Math.round((end - scrollStart) / 1000); if (!debugMode) { if (totalTime < 60) { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Scanner', 2]); } else { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Reader', 2]); } _gaq.push(['_trackEvent', 'Reading', 'PageBottom', '', totalTime]); } else { alert('bottom of page '+totalTime); } didComplete = true; } } // Track the scrolling and track location $(window).scroll(function() { if (timer) { clearTimeout(timer); } // Use a buffer so we don't call trackLocation too often. timer = setTimeout(trackLocation, callBackTime); }); });











簡単な変数宣言から始めましょう。 一部の変数の値は変更可能であり、変更する必要があることに注意してください。

  // Debug flag // CHANGE THIS TO false BEFORE INSTALLING var debugMode = true; // Default time delay before checking location var callBackTime = 100; // # px before tracking a reader var readerLocation = 150; // Set some flags for tracking & execution var timer = 0; var scroller = false; var endContent = false; var didComplete = false; // Set some time variables to calculate reading time var startTime = new Date(); var beginning = startTime.getTime(); var totalTime = 0;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

// Debug flag // CHANGE THIS TO false BEFORE INSTALLING var debugMode = true; // Default time delay before checking location var callBackTime = 100; // # px before tracking a reader var readerLocation = 150; // Set some flags for tracking & execution var timer = 0; var scroller = false; var endContent = false; var didComplete = false; // Set some time variables to calculate reading time var startTime = new Date(); var beginning = startTime.getTime(); var totalTime = 0;











callBackTime



およびreaderLocation



変更できreaderLocation



。 callbackTime



は、スクロールバーの位置を確認する前にブラウザが待機する時間（ミリ秒単位）です。 スクロール遅延を除外します。



readerLocation



これをイベントと見なして読み取りの開始として分類する前に、訪問者がスクロールする必要があるピクセル単位readerLocation



距離です。



次に、記事の読み込みアクション：

 // Track the aticle load if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ArticleLoaded', '', , true]); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

// Track the aticle load if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ArticleLoaded', '', , true]); }











次は、位置を確認するコードです。 まず、訪問者がページのどこにいるのか、どこまでスクロールしたのか、データが収集されます。

 bottom = $(window).height() + $(window).scrollTop(); height = $(document).height();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

bottom = $(window).height() + $(window).scrollTop(); height = $(document).height();











その後、チェックを開始します。



最初に、訪問者が最初のイベントが発生するのに十分にスクロールしたかどうかを確認します（この例では150ピクセル）。

 // If user starts to scroll send an event if (bottom > readerLocation && !scroller) { currentTime = new Date(); scrollStart = currentTime.getTime(); timeToScroll = Math.round((scrollStart – beginning) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'StartReading', '', timeToScroll]); } else { alert('started reading ' + timeToScroll); } scroller = true; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

// If user starts to scroll send an event if (bottom > readerLocation && !scroller) { currentTime = new Date(); scrollStart = currentTime.getTime(); timeToScroll = Math.round((scrollStart – beginning) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'StartReading', '', timeToScroll]); } else { alert('started reading ' + timeToScroll); } scroller = true; }











注：上記のイベントは直帰率を変更します。 誰かがページのスクロールを開始するとすぐに、これは失敗とは見なされません。 したがって、このイベントは失敗率を過小評価します。 これらのイベントはサイトの時間を変更することに注意してください。 サイトの時間が長くなることがわかります。



さらに、訪問者が記事の最後に到達した場合（記事を含むdivを確認します）、これをイベントと見なします。

 // If user has hit the bottom of the content send an event if (bottom >= $('.entry-content').scrollTop() + $('.entry-content').innerHeight() && !endContent) { currentTime = new Date(); contentScrollEnd = currentTime.getTime(); timeToContentEnd = Math.round((contentScrollEnd – scrollStart) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ContentBottom', '', timeToContentEnd]); } else { alert('end content section '+timeToContentEnd); } endContent = true; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

// If user has hit the bottom of the content send an event if (bottom >= $('.entry-content').scrollTop() + $('.entry-content').innerHeight() && !endContent) { currentTime = new Date(); contentScrollEnd = currentTime.getTime(); timeToContentEnd = Math.round((contentScrollEnd – scrollStart) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ContentBottom', '', timeToContentEnd]); } else { alert('end content section '+timeToContentEnd); } endContent = true; }











上記のコードは、記事を含むdivがentry-content



と呼ばれるブログ用であることに注意することが重要です。 ブログの記事が含まれているdivを見てください。



最後に、ページの最後に到達した訪問者を追跡します。 次に、いくつかのことを行います。

• 訪問者にどれくらい時間がかかったかを考慮します。
• イベントに送信します。
• 訪問者をグループ化するために必要なユーザー変数を使用します。 訪問者がページ全体を表示するために60秒を超える時間を費やした場合、私たちは彼をReadersグループに入れます。 訪問者が費やす時間が60秒未満の場合、私たちは彼をスキャナーグループに入れます。

この変数はユーザー変数の5番目のスロットに格納されます。これは、これが私たちの空きスロットだからです。 他の空きスロットを使用できます。 カスタム変数の詳細についてはこちらをご覧ください 。

 // If user has hit the bottom of page send an event if (bottom >= height && !didComplete) { currentTime = new Date(); end = currentTime.getTime(); totalTime = Math.round((end – scrollStart) / 1000); if (!debugMode) { if (totalTime < 60) { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Scanner', 2]); } else { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Reader', 2]); } _gaq.push(['_trackEvent', 'Reading', 'PageBottom', '', totalTime]); } else { alert('bottom of page '+totalTime); } didComplete = true; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

// If user has hit the bottom of page send an event if (bottom >= height && !didComplete) { currentTime = new Date(); end = currentTime.getTime(); totalTime = Math.round((end – scrollStart) / 1000); if (!debugMode) { if (totalTime < 60) { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Scanner', 2]); } else { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Reader', 2]); } _gaq.push(['_trackEvent', 'Reading', 'PageBottom', '', totalTime]); } else { alert('bottom of page '+totalTime); } didComplete = true; }











ページで費やされた時間を記録するので、測定の精度を高めるためにこのデータを使用できます。 ランダムに60秒を選択しました。 十分なデータが蓄積されたら、この値を調整できます。



最後に、訪問者がページの最後までスクロールしたかどうかを確認するコード：

 // Track the scrolling and track location $(window).scroll(function() { if (timer) { clearTimeout(timer); } // Use a buffer so we don't call trackLocation too often. timer = setTimeout(trackLocation, callBackTime); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

// Track the scrolling and track location $(window).scroll(function() { if (timer) { clearTimeout(timer); } // Use a buffer so we don't call trackLocation too often. timer = setTimeout(trackLocation, callBackTime); });











これがコード全体です。 ここにコピーして 、必要に応じてサイトに投稿できます。



著者からの謝辞：

Nick Mihailovski-Googleの開発者（著者の反対側に座っています）

Thomas Baekdalは賢い男で、 www.baekal.comに公開されています

Avinash Kaushik-誰なのかわからない場合は...

Joost de Valk-WordPress向けGoogleアナリティクスの作成者

Eivind Savio-ブロガーおよびGAコンサルタント

出典（英語）： http : //cutroni.com/blog/2012/02/21/advanced-content-tracking-with-google-analytics-part-1/