ここ数年、シングルページのWebサイトとWebアプリケーションが標準となっています。測定されたデータが意味を持ち、正しいものであることを確認する必要があるため、このようなWebサイトやアプリケーションの追跡を成功させることが重要です。ですので我々InnoCraftは、顧客のウェブトラッキングと測定戦略を設定するのを助けます。クライアントが直面するいくつかの課題は、シングルページのWebサイトとWebアプリケーションの追跡です。この課題については、記事の最後に記載します。

トラッキングコードの埋め込み

まず、JavaScriptトラッキングコードをシングルページのWebサイトやWebアプリケーションにいつものように埋め込む必要があります。これを行うには、Piwikの右上にある[管理]に移動し、[トラッキングコード]をクリックして、必要に応じてトラッキングコードを調整します。

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

新しいページビューを追跡する必要があるときに問題が発生します。通常のウェブサイトとは異なり、通常の新しいページの読み込みがないため、新しいページが表示されたときにPiwikが自動的に検出することはできません。これは、URLとページタイトルが変更されたときに　Piwik　に知らせる必要があることを意味します。これを行うには setCustomUrl メソッドと setDocumentTitle メソッドを次のように使用します：

window.addEventListener('hashchange', function() {
        _paq.push(['setCustomUrl', '/' + window.location.hash.substr(1)']);
        _paq.push(['setDocumentTitle', 'My New Title']);
        _paq.push(['trackPageView']);
}

以前に設定したカスタム変数をリセットする

スコープ「ページ」でカスタム変数を設定している場合は、これらのカスタム変数を新しいページビューに割り当てられたものと同じように削除する必要があります。次のコードにはPiwik 3.0.2が必要です：

_paq.push(['deleteCustomVariables', 'page']);      
_paq.push(['trackPageView']);

生成時間の更新

次に、新しいページビューを追跡する前に生成時間を更新する必要があります。それ以外の場合、最初のページ生成時間はその後のすべてのページビューに反映されます。

ページが変更されたときにサーバーから新しいコンテンツを読み込まない場合は、値をゼロに設定するだけです。

_paq.push(['setGenerationTimeMs', 0]);
_paq.push(['trackPageView']);

サーバーから新しいコンテンツを読み込む場合は、このコンテンツの読み込みにかかる時間（ミリ秒単位）を測定し、必要な時間を設定することをお勧めします。

_paq.push(['setGenerationTimeMs', timeItTookToLoadPage]);
_paq.push(['trackPageView']);

リファラーの更新

以前のページを新しいページビューの参照元として追跡するかどうかによって、参照元URLを前のページURLに設定して更新する必要があります。

_paq.push(['setReferrerUrl', previousPageUrl]);
_paq.push(['trackPageView']);

新しいコンテンツをPiwikに認識させる

新しいページを表示すると、1ページのDOMも同様に変更される可能性があります。たとえば、ページの一部を、Ajax経由でサーバーからロードした新しいコンテンツで置き換えることができます。つまり、Piwikに新しいコンテンツのDOMをスキャンするよう指示する必要があります。ここでは、さまざまなコンテンツタイプ（ビデオとオーディオ、フォーム、リンクとダウンロード、コンテンツのトラッキング）について説明します。

ビデオとオーディオのトラッキング

Media Analytics機能を使用してビデオやオーディオを追跡する場合は、新しいページが表示されるたびに次の方法を呼び出す必要があります。

_paq.push(['MediaAnalytics::scanForMedia', documentOrElement]);

パラメータを渡さないと、新しいメディアのDOM全体がスキャンされます。 また、要素を渡して、ウェブサイトやアプリの特定の領域だけをスキャンして新しいメディアを探すこともできます。

フォームトラッキング

フォーム・アナリティクス機能を使用してオンライン・フォームのパフォーマンスを測定する場合は、新しいページが表示されるたびに次の方法を呼び出す必要があります。

_paq.push(['FormAnalytics::scanForForms', docuemntOrElement]);

documentOrElementは、DOM全体（パラメータが設定されていない場合のデフォルト）を再スキャンするように文書化するか、要素を渡して再スキャンを特定の領域に制限することができます。

リンクトラッキング

リンクトラッキング機能を使用してアウトリンクとダウンロードを測定すると、Piwikは、DOMが変更されるたびに、新しく追加されたリンクのためにDOM全体を再スキャンする必要があります。Piwikがそのようなリンクを追跡するようにするには、このメソッドを呼び出します：

_paq.push(['enableLinkTracking']);

コンテンツトラッキング

コンテンツトラッキング機能を使用する場合は、新しいページが表示され、DOMの一部が変更されたときはいつでも、このメソッドを呼び出す必要があります：

_paq.push(['trackContentImpressionsWithinNode', documentOrElement]);

documentOrElementは、documentまたは他のメソッドと同様の要素を指します。Piwikは次に、新たに追加されたコンテンツブロックのページをスキャンします。

シングルページアプリケーションの測定：完全な例

例では、ハッシュが変更されたときにいつでも新しいページを追跡したいと仮定して、すべてがどのように連動するかを示します:

var currentUrl = location.href;
window.addEventListener('hashchange', function() {
    _paq.push(['setReferrerUrl', currentUrl]);
     currentUrl = '' + window.location.hash.substr(1);
    _paq.push(['setCustomUrl', currentUrl]);
    _paq.push(['setDocumentTitle', 'My New Title']);

    // remove all previously assigned custom variables, requires Piwik 3.0.2
    _paq.push(['deleteCustomVariables', 'page']); 
    _paq.push(['setGenerationTimeMs', 0]);
    _paq.push(['trackPageView']);
    
    // make Piwik aware of newly added content
    var content = document.getElementById('content');
    _paq.push(['MediaAnalytics::scanForMedia', content]);
    _paq.push(['FormAnalytics::scanForForms', content]);
    _paq.push(['trackContentImpressionsWithinNode', content]);
    _paq.push(['enableLinkTracking']);
});

質問ですか？

ご不明な点がございましたら、お気軽にお問い合わせください。Piwik JavaScriptトラッカーの詳細については、Piwik Developer Zoneを参照してください。