m
/
gatsby-plugin-matomo
mirror of https://github.com/kremalicious/gatsby-plugin-matomo.git
1
0
Fork 0
Code Releases Activity

add prettier

This commit is contained in:
Matthias Kretschmann 2019-06-10 02:04:28 +02:00
parent bbb5f19f94
commit 858fc2eb8a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 75 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.eslintrc
View File

@ -1,16 +1,10 @@
{
"extends": ["eslint:recommended", "plugin:react/recommended"],
"plugins": ["react"],
"rules": {
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended"
],
"plugins": ["react", "prettier"],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {

5
.prettierrc Normal file
View File

@ -0,0 +1,5 @@
{
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}

52
README.md
View File

@ -37,25 +37,25 @@ Plugin uses sensible defaults prioritizing user experience & privacy:
1. First, install the plugin from your project's root:
```bash
cd yourproject/
npm i gatsby-plugin-matomo
```
```bash
cd yourproject/
npm i gatsby-plugin-matomo
```
2. Then load the plugin from your `gatsby-config.js` and set the required variables:
```js
plugins: [
{
resolve: 'gatsby-plugin-matomo',
options: {
siteId: 'YOUR_SITE_ID',
matomoUrl: 'https://YOUR_MATOMO_URL.COM',
siteUrl: 'https://YOUR_LIVE_SITE_URL.COM'
}
}
]
```
```js
plugins: [
{
resolve: 'gatsby-plugin-matomo',
options: {
siteId: 'YOUR_SITE_ID',
matomoUrl: 'https://YOUR_MATOMO_URL.COM',
siteUrl: 'https://YOUR_LIVE_SITE_URL.COM'
}
}
]
```
3. That's it!
@ -63,16 +63,16 @@ _NOTE: By default, this plugin only generates output when run in production mode
### Options
Option | Explanation
-----------------|---------
`siteId` | Your Matomo site ID configured in your Matomo installation.
`matomoUrl` | The url of your Matomo installation.
`siteUrl` | The url of your site, usually the same as `siteMetadata.siteUrl`. Only used for generating the url for `noscript` image tracking fallback.
`exclude` | (optional) Specify an array of pathnames where tracking code will be excluded. The pathname `/offline-plugin-app-shell-fallback/` is excluded by default.
`requireConsent` | (optional) If true, tracking will be disabled until you call `window._paq.push(['setConsentGiven']);`.
`disableCookies` | (optional) If true, no cookie will be used by Matomo.
`localScript` | (optional) If set, load local `piwik.js` script from the given path, instead of loading it from your `matomoUrl`.
`dev` | (optional) Activate dev mode by setting to `true`. Will load all scripts despite not running in `production` environment. Ignores your local browser's DNT header too. Outputs some information in console about what it is doing. Useful for local testing but careful: all hits will be send like in production.
| Option | Explanation |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `siteId` | Your Matomo site ID configured in your Matomo installation. |
| `matomoUrl` | The url of your Matomo installation. |
| `siteUrl` | The url of your site, usually the same as `siteMetadata.siteUrl`. Only used for generating the url for `noscript` image tracking fallback. |
| `exclude` | (optional) Specify an array of pathnames where tracking code will be excluded. The pathname `/offline-plugin-app-shell-fallback/` is excluded by default. |
| `requireConsent` | (optional) If true, tracking will be disabled until you call `window._paq.push(['setConsentGiven']);`. |
| `disableCookies` | (optional) If true, no cookie will be used by Matomo. |
| `localScript` | (optional) If set, load local `piwik.js` script from the given path, instead of loading it from your `matomoUrl`. |
| `dev` | (optional) Activate dev mode by setting to `true`. Will load all scripts despite not running in `production` environment. Ignores your local browser's DNT header too. Outputs some information in console about what it is doing. Useful for local testing but careful: all hits will be send like in production. |
```js
plugins: [

11
package.json
View File

@ -7,12 +7,10 @@
"build": "babel src --out-dir . --ignore __tests__",
"start": "babel -w src --out-dir . --ignore __tests__",
"test": "eslint ./src/**/*.js",
"release": "./node_modules/release-it/bin/release-it.js --src.tagName='v%s' --github.release --npm.publish --non-interactive",
"release-minor": "./node_modules/release-it/bin/release-it.js minor --src.tagName='v%s' --github.release --npm.publish --non-interactive",
"release-major": "./node_modules/release-it/bin/release-it.js major --src.tagName='v%s' --github.release --npm.publish --non-interactive",
"format": "prettier --write 'src/**/*.{js,jsx}'",
"release": "release-it --non-interactive",
"prepublishOnly": "cross-env NODE_ENV=production npm run build",
"changelog": "./node_modules/.bin/conventional-changelog -i CHANGELOG.md -s -r 0",
"beforeStage": "npm run changelog"
"changelog": "./node_modules/.bin/conventional-changelog -i CHANGELOG.md -s -r 0"
},
"dependencies": {},
"devDependencies": {
@ -23,7 +21,10 @@
"conventional-changelog-cli": "^2.0.12",
"cross-env": "^5.2.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.12.4",
"prettier": "^1.18.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.8.1",

17
src/gatsby-browser.js
View File

@ -15,12 +15,17 @@ function getDuration() {
}
exports.onRouteUpdate = ({ location, prevLocation }) => {
if (process.env.NODE_ENV === 'production' && typeof _paq !== 'undefined' || window.dev === true) {
if (
(process.env.NODE_ENV === 'production' && typeof _paq !== 'undefined') ||
window.dev === true
) {
const _paq = window._paq || []
const dev = window.dev || null
const url = location.pathname + location.search + location.hash
const prevUrl = prevLocation && prevLocation.pathname + prevLocation.search + prevLocation.hash
const prevUrl =
prevLocation &&
prevLocation.pathname + prevLocation.search + prevLocation.hash
// document.title workaround stolen from:
// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@ -49,13 +54,7 @@ exports.onRouteUpdate = ({ location, prevLocation }) => {
if (first) {
first = false
_paq.push([
'trackEvent',
'javascript',
'load',
'duration',
getDuration()
])
_paq.push(['trackEvent', 'javascript', 'load', 'duration', getDuration()])
if (dev) {
console.log(`[Matomo] Tracking duration for: ${url}`)

38
src/gatsby-ssr.js
View File

@ -1,18 +1,25 @@
import React from 'react'
function buildTrackingCode(pluginOptions) {
const script = pluginOptions.localScript
? pluginOptions.localScript
: `${pluginOptions.matomoUrl}/piwik.js`
const {
matomoUrl,
siteId,
dev,
localScript,
requireConsent,
disableCookies
} = pluginOptions
const script = localScript ? localScript : `${matomoUrl}/piwik.js`
const html = `
window.dev = ${pluginOptions.dev}
window.dev = ${dev}
if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
window._paq = window._paq || [];
${pluginOptions.requireConsent ? 'window._paq.push([\'requireConsent\']);' : ''}
${pluginOptions.disableCookies ? 'window._paq.push([\'disableCookies\']);' : ''}
window._paq.push(['setTrackerUrl', '${pluginOptions.matomoUrl}/piwik.php']);
window._paq.push(['setSiteId', '${pluginOptions.siteId}']);
${requireConsent ? "window._paq.push(['requireConsent']);" : ''}
${disableCookies ? "window._paq.push(['disableCookies']);" : ''}
window._paq.push(['setTrackerUrl', '${matomoUrl}/piwik.php']);
window._paq.push(['setSiteId', '${siteId}']);
window._paq.push(['enableHeartBeatTimer']);
window.start = new Date();
@ -23,7 +30,7 @@ function buildTrackingCode(pluginOptions) {
if (window.dev === true) {
console.log('[Matomo] Tracking initialized')
console.log('[Matomo] matomoUrl: ${pluginOptions.matomoUrl}, siteId: ${pluginOptions.siteId}')
console.log('[Matomo] matomoUrl: ${matomoUrl}, siteId: ${siteId}')
}
}
`
@ -37,7 +44,10 @@ function buildTrackingCode(pluginOptions) {
}
function buildTrackingCodeNoJs(pluginOptions, pathname) {
const html = `<img src="${pluginOptions.matomoUrl}/piwik.php?idsite=${pluginOptions.siteId}&rec=1&url=${pluginOptions.siteUrl + pathname}" style="border:0" alt="tracker" />`
const html = `<img src="${pluginOptions.matomoUrl}/piwik.php?idsite=${
pluginOptions.siteId
}&rec=1&url=${pluginOptions.siteUrl +
pathname}" style="border:0" alt="tracker" />`
return (
<noscript
@ -62,10 +72,10 @@ exports.onRenderBody = ({ setPostBodyComponents, pathname }, pluginOptions) => {
(process.env.NODE_ENV === 'production' || pluginOptions.dev === true) &&
!isPathExcluded
) {
return setPostBodyComponents([
buildTrackingCode(pluginOptions),
buildTrackingCodeNoJs(pluginOptions, pathname)
])
return setPostBodyComponents([
buildTrackingCode(pluginOptions),
buildTrackingCodeNoJs(pluginOptions, pathname)
])
}
return null
}