Please provide an example using @piwikpro/pwa-piwik-pro

[BenLune]

Hi,
I subscribed to the Piwik Pro Plan and wanted to use @piwikpro/pwa-piwik-pro in my angular project. It doesn't work for me yet.
Could you please update the angular example using it please ? You'll will have to make your example a PWA, then use @piwikpro/pwa-piwik-pro package.

I see that there are few answers to issues here, please give me a feedback.

Thanks,
Benoît

[emtomczyk]

Hi @BenLune! I'm the PM of the team responsible for Integrations at Piwik PRO. I'd like to confirm that we have received your request and planned the time to verify if and how quickly we are able to help you with it, as the full update of the Angular library is planned for a later term. We'll come back with an update on Monday.

[BenLune]

Hi @emtomczyk ,
Thank you for your kind reply.
I think I won't be the only interested by this need to get a demo. In Piwik, there is special chapter talking about PWAs and offline management. But I don't see any example, and when I wanted to try it it didn't work. If you have one, even if it is not angular, I would be interested to see it.

[danieltwork]

Hey @BenLune, thanks for your patience.

You have opened an issue in ngx-piwik-pro project, but if I understand correctly you would like to be able to use pwa-piwik-pro together with your Angular based project.

I would like to make it clear that pwa-piwik-pro is a separate project and does not require ngx-piwik-pro to work, it can work independently. In fact, you can use PWA Piwik PRO even with Vanilla JS.

Very importantly, PWA Piwik PRO is an extension to the Service Worker - please note that we do not import this package into the application project. Of course, sometimes the framework helps to build the serviceworker.js file however, this depends on the framework you use.

You can find the pwa-piwik-pro project under HERE.

To enable collecting data from your PWAs using Piwik PRO Analytics, call the initialize() method in your service worker:

import PiwikPro from '@piwikpro/pwa-piwik-pro';

PiwikPro.initialize({
  containerURL: 'example.com',
  containerId: '12345678-1234-1234-1234-1234567890ab'
});

This is all that's required to queue and retry failed requests to Piwik PRO, and it's the simplest way to get Piwik PRO working offline.

It is important to know that Angular generates the service worker file itself by default. Therefore, it is important to follow the Angular documentation in this case.

Short steps on what to do to provide your own service worker without giving up the default one that angular provides.

To avoid working with pure js I add custom-service-worker.ts file to the project. I make sure that it is built to custom-service-worker.js in the application building process.

1. In the application module, register your own serviceworker file.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// ... other imports 
import { ServiceWorkerModule } from '@angular/service-worker';

@NgModule({
  declarations: [
    AppComponent,
   // ...
  ],
  imports: [
    // ...
    ServiceWorkerModule.register('custom-service-worker.js'),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. I am creating a custom-service-worker.ts file for an example I am uploading what it might look like.

import PiwikPro from '@piwikpro/pwa-piwik-pro/src';

PiwikPro.initialize({
  containerURL: 'https://test.piwik.pro',
  containerId: '0c0a8661-8c10-4f59-b8fc-1c926cbac184'
});

importScripts('./ngsw-worker.js'); // Important if you don't want to lose the features that angular's default service worker provides. 

self.addEventListener('message', (event) => {
  console.log('message picked up by custom service worker code', event);
});

3. Find a way to deliver the compiled custom-service-worker.ts to custom-service-worker.js and deliver the file to the project's main folder.

Hopefully, I have explained to you how pwa-piwik-pro works and from now on you will know how to implement it in your project.

If anything remains unclear feel free to contact me!
Good luck!

[BenLune]

Hi @danieltwork ,
Thanks for your detailed reply.
As I understand, I don't need to use ngx-piwik-pro in the application. Using @piwikpro/pwa-piwik-pro will do the job, service worker side, right (with route change detection etc.) ?
In the application, I need to send userID, custom events etc. Do I have to "send" messages from application to service Worker to do it, or do I have to use ngx-piwik-pro or Vanilla PWA Piwik PRO to do it? And set the same Piwik configuration for both (Service Worker and Application).
Have a nice day !

[danieltwork]

@BenLune, You need to know that our pwa-piwik-pro library is responsible for storing requests that have not been correctly sent to the server due to a lack of internet connection. If the library detects an internet connection, it will try to send the stored requests. This is the only thing pwa-piwik-pro does.

Treat pwa-piwik-pro as an extension. Sending events will not happen without using container script. Tasks such as sending events, route change detection, etc. are performed by the container scripts you paste onto the page.
You will find it on your instance of Piwik PRO: example.piwik.pro > Administration > Sites & Apps (select site) > Installation (tab).

Of course, if you are using an SPA framework a better choice would be to use a framework-specific library. Such libraries generate the container code and insert it at the best time into the application code, so that you do not have to do it manually.

I hope I have explained what the pwa-piwik-pro library is.
Good luck!