piwikpro / react-piwik-pro

A dedicated Piwik PRO library that helps with implementing Piwik PRO Tag Manager and the Piwik PRO tracking client in React-based applications.

Piwik

This is the last snapshot of open source Piwik PRO, it's no longer maintained, so please don't use it. We've migrated to a new, proprietary platform, its cloud "Core" version is available for free here.

Description

Piwik is the leading Free/Libre open analytics platform.

Piwik is a full featured PHP MySQL software program that you download and install on your own webserver. At the end of the five minute installation process you will be given a JavaScript code. Simply copy and paste this tag on websites you wish to track and access your analytics reports in real time.

Piwik aims to be a Free software alternative to Google Analytics, and is already used on more than 1,000,000 websites. Privacy is built-in!

Mission Statement

« To create, as a community, the leading international Free/Libre web analytics platform, providing access to all functionality through open components and open APIs. »

Or in short:

« Liberate Web Analytics »

License

Piwik is released under the GPL v3 (or later) license, see misc/gpl-3.0.txt

Requirements

• PHP 5.5.9 or greater
• MySQL version 5.5 or greater, or MariaDB
• PHP extension pdo and pdo_mysql, or the MySQLi extension.
• Piwik is OS / server independent

Install

• Upload piwik to your webserver
• Point your browser to the directory
• Follow the steps
• Add the given javascript code to your pages
• (You may also generate fake data to experiment, by enabling the plugin VisitorGenerator)

Quality Assurance

The Piwik project uses an ever-expanding comprehensive set of thousands of unit tests and hundreds of automated integration tests, system tests, JavaScript tests, and screenshot UI tests, running on a continuous integration server as part of its software quality assurance.

We use BrowserStack.com testing tool to help check the Piwik user interface is compatible with many browsers.

Security

Security is a top priority at Piwik. As potential issues are discovered, we validate, patch and release fixes as quickly as we can. We have a security bug bounty program in place that rewards researchers for finding security issues and disclosing them to us.

react-piwik-pro's Issues

test

Potentially wrong parameter type in Custom Dimension service - deleteCustomDimension method

In Custom Dimension service function deleteCustomDimension have parameter customDimensionId typed as string but rest of the functions type that param as string | number. In the JavaScript client documentation there is another version that param should be number. I guess it should be unified.

https://developers.piwik.pro/en/latest/data_collection/web/javascript_tracking_client/api.html#custom-dimensions
https://github.com/PiwikPRO/react-piwik-pro#custom-dimensions

CustomEvent only takes a number as value

export declare function trackEvent(category: string, action: string, name?: string, value?: number): void;

This is not consistent with the documentation and I would like to use strings as values.

`ReferenceError: process is not defined` for `process.env.DEBUG`

I am trying to integrate this library with docusaurus, but without any luck. After building and running it in the browser I am getting the message

ReferenceError: process is not defined, which is true for in-browser processes. It seems that in some environments process.env.XXX is replaced by webpack but not in my case. Could you try to make this more portable to other environments?

It's this line here:

react-piwik-pro/src/core/index.ts

Line 34 in 1aeee73

export const IS_DEBUG = process.env.DEBUG || process.env.NODE_ENV === 'development';

Custom data layer name

Nice to see a proper JS library for client side Piwik pro tracking. I'm eagerly waiting to take this into use in our projects. Unfortunately there is one issue blocking us from doing so.

While the Piwik PRO service support using custom data layer names, this library seems to have used a hardcoded default value dataLayer.

I'm wondering whether it would be possible for the library to support initialising the tracker with a custom data layer name. Looking at the code it shouldn't be too complicated to add a new parameter to the initialize function. For example initialize(containerId: string, containerUrl: string, nonce?: string, dataLayerName?: string).

Dashboard widgets doesn't count anything on site

Hello, I'm new to PiwikPro and I'm trying to setup it in my NextJS app. So I started by following the docs and setup my _app.tsx component by adding
useEffect(() => { PiwikPro.initialize( process.env.NEXT_PUBLIC_STAGE === 'production' ? 'prod_container_id' : 'dev_container_id', 'container_url', ); }, []);
and added a CustomEvent to my register form
CustomEvent.trackEvent('Forms', 'register', 'success');
btw. I tried passing new user id as value but typescript screams that must be of type number, is it a bug or it must be a number?

So I pushed it to my dev env and checked if there are piwin connecting errors, it's clear
Then entered Dashboard and created a widget to watch for that event I just created

It always dispaly 0 so I created a new widget that should count every /blog enterance following PiwikPro tutorial on youtube, it also doesn't count anything.
Then I entered Debug analytics in settings and there are all my events I made

So there is my question, am I doing something wrong?

Additionally PiwikPro found one enterance to my prod envitonment, but it's not even deployed yet and PiwikPro initialization is only on my dev branch.

Not available via `yarn`?

Hi, I get the following error when running yarn add @piwik-pro/react-piwik-pro:

> yarn add @piwik-pro/react-piwik-pro
yarn add v1.22.17
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@piwik-pro%2freact-piwik-pro: Not found".

Would you be able to publish the package to yarn?

TypeError: _piwikpro_react_piwik_pro__WEBPACK_IMPORTED_MODULE_9___default(...).initialize is not a function

Hello! Somehow I get the webpack error even though it has been working for a few weeks now. I didn't changed something (neither webpack version, react-piwik package version or the relevant code parts).

TypeError: _piwikpro_react_piwik_pro__WEBPACK_IMPORTED_MODULE_9___default(...).initialize is not a function`

The relevant code follows the documentation, is initialized in the _app.tsx and looks like that:

`import PiwikPro from '@piwikpro/react-piwik-pro';
....
PiwikPro.initialize(PIWIK_PRO_APP_ID, PIWIK_PRO_INSTANCE);

I am using React 17.0.2 with Next.js 12.2.5. I already tried different ways of importing the module, but that didn't work out.

Does anybody know what the issue is here?

Console logging

At the moment, this library is polluting the user's browser console with constant logging on production sites. Looking at paq.service.ts, there is no way to shut this off. Could you please add a global config flag so we can enable and disable this logging when we need it? At the moment I have no choice but to patch the npm package via patch-package.