Tracking Progressive Web Apps

Silver Contributor
Silver Contributor

Hi, 

I am sure there is mention about tracking best practices for PWA, but I was not able to find any info. Perhaps if I can get help by highlighting implementation requirements and possible tracking challenges. 

Note. We are currently tracking iOS and Android Apps with especific 'Mobile Tealium IQ'  profiles and our apps have Tealium SDK installed. 

Here is a link to the PWA.

https://radiofreeasia.gitlab.io/mobile-news/#/

Thanks,
Cesar

2 REPLIES 2

Tracking Progressive Web Apps

Community Manager
Community Manager

Hi @CesarFlorero ,

Here are some code snippets that might be helpful from the following blog post:

PWAs: What They Are and Why They’re Important

// File: index.html or app.js
// For those events in the window
window.addEventListener(‘appinstalled’, (evt) => {
  utag.link({tealium_event: "app_installed", app_type: "PWA"});
});

// In our app, listen to incoming events from the service worker
navigator.serviceWorker.addEventListener(‘message’, event => {
  utag.link(event.data);
});

// File: service-worker.js
// For those events occurring in the service worker
self.addEventListener(‘notificationclick’, event => {
  event.waitUntil(
    self.clients.matchAll({includeUncontrolled: true, type: "window"}).then(function (clients){
      clients.forEach(function(client){
        client.postMessage({"tealium_event":"push_message_click", "push_message_id": "abc"});
      })
    })
  )
})  

 

Remember to "Accept as Solution" when your question has been answered and to give kudos to helpful replies.

Tracking Progressive Web Apps

Silver Contributor
Silver Contributor

Thank you! This information is very helpful. 

Public