プッシュ通知用のアナリティクスの追加方法

Question

私はプログレッシブウェブアプリケーションを開発しており、プッシュ通知用のアナリティクスを実装したいと考えています。

プッシュ通知のアナリティクスを追加することで、通知をクリックした人の数とクリックした人の数をトラッキングして記録することができます。

Answer 1

Googleアナリティクスを分析に使用するための小さなコードを書きましたが、それはかなりうまく機能します。ここ

ダンプされたノート：https://gauntface.com/blog/2016/05/01/push-debugging-analytics

---

私はこれをやった方法は、上述したポストである：私は私のためのトラッキングを行うjavascriptのファイルをインポートするサービスワーカーで

、設定分析IDと適切なイベントでトラッキングが呼び出されます。 self.analytics.trackEventを探します。

importScripts('./scripts/analytics.js'); 

self.analytics.trackingId = 'UA-77119321-2'; 

self.addEventListener('push', function(event) { 
    let notificationTitle = 'Hello'; 
    const notificationOptions = { 
    body: 'Thanks for sending this push msg.', 
    icon: './images/icon-192x192.png', 
    tag: 'simple-push-demo-notification' 
    }; 

    // Important to trigger analytics asynchronously with logic 
    // to show notification 
    event.waitUntil(
    Promise.all([ 
     self.analytics.trackEvent('push-received'), 
     self.registration.showNotification('Hello', notificationOptions) 
    ]) 
); 
}); 

self.addEventListener('notificationclick', function(event) { 
    event.notification.close(); 

    // Important to trigger analytics asynchronously with logic 
    // to do other work (i.e. open window) 
    event.waitUntil(
    Promise.all([ 
     self.analytics.trackEvent('notification-click'), 
     clients.openWindow('https://gauntface.github.io/simple-push-demo/') 
    ]) 
); 
}); 

Googleアナリティクスの測定プロトコルに実際のトラッキング呼び出しを行うためのコードを以下に示します。あなたは上のこのすべてを見つけることができます

class Analytics { 
    trackEvent(eventAction, eventValue) { 
    if (!this.trackingId) { 
     console.error('You need to set a trackingId, for example:'); 
     console.error('self.analytics.trackingId = \'UA-XXXXXXXX-X\';'); 

     // We want this to be a safe method, so avoid throwing Unless 
     // It's absolutely necessary. 
     return Promise.resolve(); 
    } 

    if (!eventAction && !eventValue) { 
     console.warn('sendAnalyticsEvent() called with no eventAction or ' + 
     'eventValue.'); 
     return Promise.resolve(); 
    } 

    return self.registration.pushManager.getSubscription() 
    .then(subscription => { 
     if (subscription === null) { 
     // The user has not subscribed yet. 
     throw new Error('No subscription currently available.'); 
     } 

     const payloadData = { 
     // GA Version Number 
     v: 1, 
     // Client ID 
     cid: subscription.endpoint, 
     // Tracking ID 
     tid: this.trackingId, 
     // Hit Type 
     t: 'event', 
     // Data Source 
     ds: 'serviceworker', 
     // Event Category 
     ec: 'serviceworker', 
     // Event Action 
     ea: eventAction, 
     // Event Value 
     ev: eventValue 
     }; 

     const payloadString = Object.keys(payloadData) 
     .filter(analyticsKey => { 
     return payloadData[analyticsKey]; 
     }) 
     .map(analyticsKey => { 
     return `${analyticsKey}=` + 
      encodeURIComponent(payloadData[analyticsKey]); 
     }) 
     .join('&'); 

     return fetch('https://www.google-analytics.com/collect', { 
     method: 'post', 
     body: payloadString 
     }); 
    }) 
    .then(response => { 
     if (!response.ok) { 
     return response.text() 
     .then(responseText => { 
      throw new Error(
      `Bad response from Google Analytics ` + 
      `[${response.status}] ${responseText}`); 
     }); 
     } 
    }) 
    .catch(err => { 
     console.warn('Unable to send the analytics event', err); 
    }); 
    } 
} 

if (typeof self !== 'undefined') { 
    self.analytics = new Analytics(); 
} 

：APIはpayloadData属性分析があるので期待して、私はAPIが空/ null値をフィルタリングする、期待する形式で、これらのパラメータの文字列を生成し、痛々しいほど単純化され：https://github.com/gauntface/simple-push-demo

Answer 2

WordPress web-push pluginで使用しているオプションは、通知で開いたURLにクエリ引数を追加することです（this codeを参照）。この方法で、人々が通知を何回クリックしたかを知ることができます。

通知を閉じる人の数については、残念ながら知ることはできません。 notificationclose eventがありますが、それは永続通知のためだけにトリガーされます。

Answer 3

Pushpadで通知URLは、リダイレクトページで、オープニングを追跡してからターゲットURLにリダイレクトします。

たとえば、ターゲットURLがhttp://example.com/targetの場合、クリック時に開く通知URLはhttp://example.com/redirect?url=/targetになります。

通知が却下された時点を追跡する方法はありません。

アップデート（2016年6月）：他の人は、仕様にはnotificationclose eventがあることを指摘しています。しかし、私はブラウザサポートをテストしていません（現在、このイベントはMDNには載っていません）。さらに、このイベントは、ユーザーが通知をクリックしたとき（通知が閉じた後に）トリガーされる可能性があることを懸念しています。