m/gatsby-plugin-matomo
1
0
Fork 0
mirror of https://github.com/kremalicious/gatsby-plugin-matomo.git synced 2024-12-22 09:13:19 +01:00
Code Releases Activity

add prettier

Browse Source
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"], "extends": [
"plugins": ["react"], "eslint:recommended",
"rules": { "plugin:react/recommended",
"quotes": [ "plugin:prettier/recommended"
"error", ],
"single" "plugins": ["react", "prettier"],
],
"semi": [
"error",
"never"
]
},
"parserOptions": { "parserOptions": {
"sourceType": "module", "sourceType": "module",
"ecmaFeatures": { "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: 1. First, install the plugin from your project's root:
```bash ```bash
cd yourproject/ cd yourproject/
npm i gatsby-plugin-matomo npm i gatsby-plugin-matomo
``` ```
2. Then load the plugin from your `gatsby-config.js` and set the required variables: 2. Then load the plugin from your `gatsby-config.js` and set the required variables:
```js ```js
plugins: [ plugins: [
{ {
resolve: 'gatsby-plugin-matomo', resolve: 'gatsby-plugin-matomo',
options: { options: {
siteId: 'YOUR_SITE_ID', siteId: 'YOUR_SITE_ID',
matomoUrl: 'https://YOUR_MATOMO_URL.COM', matomoUrl: 'https://YOUR_MATOMO_URL.COM',
siteUrl: 'https://YOUR_LIVE_SITE_URL.COM' siteUrl: 'https://YOUR_LIVE_SITE_URL.COM'
} }
} }
] ]
``` ```
3. That's it! 3. That's it!
@ -63,16 +63,16 @@ _NOTE: By default, this plugin only generates output when run in production mode
### Options ### Options
Option | Explanation | Option | Explanation |
-----------------|--------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
`siteId` | Your Matomo site ID configured in your Matomo installation. | `siteId` | Your Matomo site ID configured in your Matomo installation. |
`matomoUrl` | The url of 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. | `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. | `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']);`. | `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. | `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`. | `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. | `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 ```js
plugins: [ plugins: [

11
package.json
View File

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

17
src/gatsby-browser.js
View File

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

38
src/gatsby-ssr.js
View File

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