piwikpro / next-piwik-pro Goto Github PK

Library for implementing Piwik PRO in Next.js web applications

License: MIT License

TypeScript 92.58% CSS 6.03% JavaScript 1.39%

next-piwik-pro's Introduction

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.

next-piwik-pro's People

Contributors

Stargazers

Watchers

Forkers

livechat ciruz michalczukm auto200

next-piwik-pro's Issues

NextJS 13 and app dir (loader issues, e.g tailwind)

By following the instructions for NextJS it basically works but it missconfigures other loaders, e.g Tailwind.

So by adding

/** @type {import('next').NextConfig} */

const withTM = require('next-transpile-modules')(['@piwikpro/next-piwik-pro'])
const nextConfig = {
  /* Your Next.js config */
}
module.exports = withTM(nextConfig)

and then npm run dev

- error ./app/globals.css
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;

Import trace for requested module:
./app/globals.css

typescript error with containerId

This code example from here:

<PiwikProProvider
  containerUrl={process.env.NEXT_PUBLIC_CONTAINER_URL}
  containerId={process.env.NEXT_PUBLIC_CONTAINER_ID}
>
  <Component {...pageProps} />
</PiwikProProvider>

(see https://github.com/PiwikPRO/next-piwik-pro#_apptsx-1 )

gives an TypeScript error, because it needs to be a string https://github.com/PiwikPRO/next-piwik-pro/blob/master/src/types/index.ts#L5, but the Node global is defined as string | undefined, see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/node/globals.d.ts#L296

addEcommerceItem parameters are not declared optional

Hey hey! I found an issue with the typescript declaration of the addEcommerceItem parameters. According to your docs only productSKU is required. All the others are optional. However, your typescript declaration says all of them are required:

export declare function addEcommerceItem(productSKU: string, productName: string, productCategory: string | string[], productPrice: number, productQuantity: number): void;

Did I oversee something or does this has to be fixed?

Thanks.

SyntaxError: Cannot use import statement outside a module

As I’m new to Piwik, I just installed it in my existing Next.JS project. I setup the PiwikProProvider in _app.tsx and then added PageViews to each of my pages - just to test the basics.

When testing, I immediately get this error. I’ve tried a couple of workarounds, but can’t seem to find one. Disabling the pageviews doesn’t help - this error comes straight from setting up the provider in _app.tsx. Any ideas or thoughts?

/Users/myusername/Projects/next-project/node_modules/@piwikpro/next-piwik-pro/index.js:1
import { PiwikProProvider, usePiwikPro } from './core';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at @piwikpro/next-piwik-pro (/Users/myusername/Projects/next-project/.next/server/pages/_document.js:183:18)
    at __webpack_require__ (/Users/myusername/Projects/next-project/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/_app.tsx:13:82)
    at ./src/pages/_app.tsx (/Users/myusername/Projects/next-project/.next/server/pages/_document.js:75:1)
    at __webpack_require__ (/Users/myusername/Projects/next-project/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F_document&preferredRegion=&absolutePagePath=private-next-pages%2F_document&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:21:80)
    at ./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F_document&preferredRegion=&absolutePagePath=private-next-pages%2F_document&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D! (/Users/myusername/Projects/next-project/.next/server/pages/_document.js:53:1)
    at __webpack_require__ (/Users/myusername/Projects/next-project/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/myusername/Projects/next-project/.next/server/pages/_document.js:292:39)
    at /Users/myusername/Projects/next-project/.next/server/pages/_document.js:293:28
    at Object.<anonymous> (/Users/myusername/Projects/next-project/.next/server/pages/_document.js:296:3)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at requirePage (/Users/myusername/Projects/next-project/node_modules/next/dist/server/require.js:112:75)
    at /Users/myusername/Projects/next-project/node_modules/next/dist/server/load-components.js:76:65
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async loadComponentsImpl (/Users/myusername/Projects/next-project/node_modules/next/dist/server/load-components.js:75:33)
    at async DevServer.findPageComponentsImpl (/Users/myusername/Projects/next-project/node_modules/next/dist/server/next-server.js:439:36)
- error /Users/myusername/Projects/next-project/node_modules/@piwikpro/next-piwik-pro/index.js:1

Piwik stops working after page change on NextJS application

Hello,

I have a NextJS (v13.2.4) application that uses this library to add Piwik. The consent manager opens up OK on page load and we also have a separate button that opens up the dialog again if you want to change your consent.

The problem is that after changing pages the button stops working and I get the following error message in the browser console.

Uncaught Error: Element #ppms_cm_privacy_settings_styles already exists at e.addStyleElement (48293c16-c4dd-4851-a69a-d94482895295.js:8:121595) at e.addWidgetStyles (48293c16-c4dd-4851-a69a-d94482895295.js:8:104218) at MutationObserver.setupNewWidget (48293c16-c4dd-4851-a69a-d94482895295.js:8:103593)

A <style> element with that id is added to the root of the page when the provider loads, but it seems like when changing pages the element isn't reloaded and therefore it gives out the above error.

SyntaxError: Cannot use import statement outside a module

I set up Piwik PRO with next.js, according to the following official instructions - https://developers.piwik.pro/en/latest/data_collection/web/frameworks/Piwik_PRO_Library_for_NextJS.html

But immediately when I start the dev server, I get this import error:

/Users/ciruz/dev/node/next-piwik/node_modules/@piwikpro/next-piwik-pro/index.js:1
import { PiwikProProvider, usePiwikPro } from './core';
^^^^^^

SyntaxError: Cannot use import statement outside a module

I also created a new and blank next.js installation without any modifications, still get the same error.

Empty next example repo: https://github.com/ciruz/next-piwik-error

Any ideas? Thanks

"next" should be a peer dependency, not a dependency

Currently having "next" as a dependency can result in having multiple "next" versions in the consumer app (app which utilizes the next-piwik-pro package). It can lead to not-building app.

I've described the details in the PR: #16.

Documentation suggests using deprecated next-transpile-modules

next-transpile-modules package has been deprecated with the following message:

All features of next-transpile-modules are now natively built-in Next.js 13.1. Please use Next's transpilePackages option :)

Separate version of Next.js installed when next-piwik-pro is installed

Steps to reproduce:

Install Next.js
Install @piwikpro/next-piwik-pro

Expected result:
@piwikpro/next-piwik-pro uses existing copy of Next.js

Actual result:
next-piwik-pro installs its own version of Next.js 12

Suggested fix:

It appears that the only reason Next.js is a dependency of @piwikpro/next-piwik-pro is this line:

next-piwik-pro/src/core/index.tsx

Line 2 in 6979862

import Script from 'next/script'

Given that:

This package is intended to be used with Next.js,
Literally everyone using this package will have Next.js already installed,
Next.js 13 did not introduce any breaking changes regarding next/script,

I believe it's safe to:

Move next to peerDependencies,
Loosen version requirements to ^11.0.0 || ^12.0.0 || ^13.0.0, every version of Next.js supporting next/script according to its Version History.

Workaround:

With Yarn:

  "resolutions": {
    "@piwikpro/next-piwik-pro/next": "<your_package_version>"
  },

piwikpro / next-piwik-pro Goto Github PK

next-piwik-pro's Introduction

Piwik

Description

Mission Statement

License

Requirements

Install

Quality Assurance

Security

next-piwik-pro's People

Contributors

Stargazers

Watchers

Forkers

next-piwik-pro's Issues

Recommend Projects

Recommend Topics

Recommend Org