Skip to content

Commit

Permalink
⚡️ Modernize (segmentio#46)
Browse files Browse the repository at this point in the history
  • Loading branch information
nettofarah authored Oct 8, 2019
1 parent 16712ba commit cb0514e
Show file tree
Hide file tree
Showing 50 changed files with 8,012 additions and 4,867 deletions.
27 changes: 0 additions & 27 deletions .babelrc

This file was deleted.

3 changes: 2 additions & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ version: 2
jobs:
build:
docker:
- image: circleci/node:8.10
- image: circleci/node:10
steps:
- checkout
- restore_cache:
Expand All @@ -13,6 +13,7 @@ jobs:
paths:
- ./node_modules
- run: yarn build
- run: yarn lint
- run: yarn test
- run: yarn size-limit

Expand Down
33 changes: 33 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"plugin:@typescript-eslint/eslint-recommended",
"prettier",
"prettier/@typescript-eslint"
],
"plugins": ["react", "@typescript-eslint", "prettier"],
"env": {
"browser": true,
"jest": true
},
"rules": {
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/no-floating-promises": "error",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/ban-ts-ignore": "warn",
"no-global-assign": "off",
"@typescript-eslint/unbound-method": "warn"
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
}
}
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/commonjs/
/esm/
/standalone/
/build
/storybook-static

# IDE
.vscode/
1 change: 1 addition & 0 deletions .storybook/addons.js
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
import '@storybook/addon-options/register'
import '@storybook/addon-storysource/register'
11 changes: 1 addition & 10 deletions .storybook/config.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
import { configure } from '@storybook/react'
import { setOptions } from '@storybook/addon-options'

setOptions({
showDownPanel: false
})

function loadStories() {
require('../tools/stories')
}

configure(loadStories, module)
configure(require.context('../stories', true, /\.stories\.tsx$/), module)
42 changes: 42 additions & 0 deletions .storybook/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
const webpack = require('webpack')
const pkg = require('../package.json')

module.exports = {
mode: 'development',
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
module: {
rules: [
{
test: /\.stories\.tsx?$/,
loaders: [
{
loader: require.resolve('@storybook/source-loader'),
options: {
parser: 'typescript',
prettierConfig: {
printWidth: 100,
singleQuote: false
}
}
}
],
enforce: 'pre'
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader'
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
VERSION: JSON.stringify(pkg.version)
}
})
]
}
69 changes: 36 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ It works by taking control of the analytics.js load process to only load destina
- Fine grained control of tools or categories used for tracking.
- 30s setup with a drop in script tag.
- Or fully customizable UI/UX through React components.
- EU traffic detection through [@segment/in-eu][inEU].
- EU traffic detection through [@segment/in-eu][ineu].
- Ability for visitors to reconsent and change preferences.
- Automatically updates to reflect the destinations you have enabled in Segment.

Expand All @@ -30,7 +30,7 @@ To get started, make sure you're using the latest version of the [analytics.js s

### Standalone Script

The standalone script is a prebuilt bundle that uses the [ConsentManager][] React component with [Inferno][] (a lightweight React alternative). It's best for if you want to get up and running quickly or you don't have a preexisting React setup.
The standalone script is a prebuilt bundle that uses the [ConsentManager][] React component with [Preact][] (a lightweight React alternative). It's best for if you want to get up and running quickly or you don't have a preexisting React setup.

Include the consent manager script tag after your analytic.js snippet and add your own custom copy. The standalone script can be configured in one of two ways, via data attributes for simple usage or via a global callback function for advanced usage. Both methods allow the consent manager script to be loaded async.

Expand Down Expand Up @@ -67,13 +67,13 @@ The following global variables are also exposed:
- `consentManager.version` - Version of the consent manager.
- `consentManager.openConsentManager()` - Opens the consent manager preferences dialog.
- `consentManager.doNotTrack()` - Utility function that returns the user's Do Not Track preference (normalises the cross browser API differences). Returns `true`, `false` or `null` (no preference specified).
- `consentManager.inEU()` - The [@segment/in-eu][inEU] `inEU()` function.
- `consentManager.inEU()` - The [@segment/in-eu][ineu] `inEU()` function.

#### Data Attributes

The `shouldRequireConsent` option isn't supported and the `otherWriteKeys` option should be a comma separated list.

*Note: the data attributes [won't work in Internet Explorer][currentScript] (Edge works fine though).*
_Note: the data attributes [won't work in Internet Explorer][currentscript] (Edge works fine though)._

```html
<script
Expand All @@ -95,11 +95,11 @@ The `shouldRequireConsent` option isn't supported and the `otherWriteKeys` optio

All the options are supported. The callback function also receives these exports:

- `React` - Reference to the [Inferno][] library (the API is React compatible). Useful for if you need to use virtual DOM in your content.
- `React` - Reference to the [Preact][] library (the API is React compatible). Useful for if you need to use virtual DOM in your content.
- `version` - Version of the consent manager.
- `openConsentManager()` - Opens the consent manager preferences dialog.
- `doNotTrack()` - Utility function that returns the user's Do Not Track preference (normalises the cross browser API differences). Returns `true`, `false` or `null` (no preference specified).
- `inEU()` - The [@segment/in-eu][inEU] `inEU()` function.
- `inEU()` - The [@segment/in-eu][ineu] `inEU()` function.

```html
<script>
Expand All @@ -114,16 +114,18 @@ All the options are supported. The callback function also receives these exports
' ',
React.createElement(
'a',
{href: '/docs/legal/website-data-collection-policy/', target: '_blank'},
{ href: '/docs/legal/website-data-collection-policy/', target: '_blank' },
'Website Data Collection Policy'
),
'.'
)
var bannerSubContent = 'You can change your preferences at any time.'
var preferencesDialogTitle = 'Website Data Collection Preferences'
var preferencesDialogContent = 'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
var preferencesDialogContent =
'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
var cancelDialogTitle = 'Are you sure you want to cancel?'
var cancelDialogContent = 'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'
var cancelDialogContent =
'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'
return {
container: '#target-container',
Expand Down Expand Up @@ -163,7 +165,7 @@ The write key analytics.js should be loaded with.
Type: `array<string>`<br>
Default: `[]`

Other write keys that you want to load destination information for. This is useful for including your server-side destinations in the consent manager, so that you can easily apply the user's tracking preferences to your server-side analytics too. *No data will be sent to these write keys.*
Other write keys that you want to load destination information for. This is useful for including your server-side destinations in the consent manager, so that you can easily apply the user's tracking preferences to your server-side analytics too. _No data will be sent to these write keys._

##### shouldRequireConsent

Expand Down Expand Up @@ -242,25 +244,27 @@ The content of the cancel dialog.

```javascript
import React from 'react'
import {ConsentManager, openConsentManager} from '@segment/consent-manager'
import { ConsentManager, openConsentManager } from '@segment/consent-manager'
import inEU from '@segment/in-eu'

export default function() {
const bannerContent = (
<span>
We use cookies (and other similar technologies) to collect data to improve
your experience on our site. By using our website, you’re agreeing to the
collection of data as described in our{' '}
We use cookies (and other similar technologies) to collect data to improve your experience on
our site. By using our website, you’re agreeing to the collection of data as described in our{' '}
<a href="/docs/legal/website-data-collection-policy/" target="_blank">
Website Data Collection Policy
</a>.
</a>
.
</span>
)
const bannerSubContent = 'You can change your preferences at any time.'
const preferencesDialogTitle = 'Website Data Collection Preferences'
const preferencesDialogContent = 'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
const preferencesDialogContent =
'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
const cancelDialogTitle = 'Are you sure you want to cancel?'
const cancelDialogContent = 'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'
const cancelDialogContent =
'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'

return (
<div>
Expand Down Expand Up @@ -306,7 +310,7 @@ The write key analytics.js should be loaded with.
Type: `array<string>`<br>
Default: `[]`

Other write keys that you want to load destination information for. This is useful for including your server-side destinations in the consent manager, so that you can easily apply the user's tracking preferences to your server-side analytics too. *No data will be sent to these write keys.*
Other write keys that you want to load destination information for. This is useful for including your server-side destinations in the consent manager, so that you can easily apply the user's tracking preferences to your server-side analytics too. _No data will be sent to these write keys._

##### shouldRequireConsent

Expand Down Expand Up @@ -344,6 +348,7 @@ Type: `array<object>`<br>
Default: `[]`

Destinations enabled for the provided write keys. Each destination contains these properties:

```
{
id,
Expand All @@ -366,7 +371,7 @@ New destinations that have been enabled since the user last gave consent.
Type: `object`<br>
Default: `{}`

The current preferences in state. By default if should be in the format of `{destinationId: true|false}`, but if you're using [mapCustomPreferences][] the object map can be in any format you want. *Note: this isn't the saved preferences.*
The current preferences in state. By default if should be in the format of `{destinationId: true|false}`, but if you're using [mapCustomPreferences][] the object map can be in any format you want. _Note: this isn't the saved preferences._

##### isConsentRequired

Expand Down Expand Up @@ -399,12 +404,12 @@ For a more detailed/advanced example, checkout the [ConsentManager implementatio

```javascript
import React from 'react'
import {ConsentManagerBuilder} from '@segment/consent-manager'
import { ConsentManagerBuilder } from '@segment/consent-manager'

export default function() {
return (
<ConsentManagerBuilder writeKey="<your-segment-write-key>">
{({destinations, preferences, setPreferences, saveConsent}) => (
{({ destinations, preferences, setPreferences, saveConsent }) => (
<div>
<h2>Tracking tools</h2>
<ul>
Expand Down Expand Up @@ -447,24 +452,22 @@ export default function() {
- `openConsentManager()` - Opens the [ConsentManager][] preferences dialog.
- `doNotTrack()` - Returns the user's Do Not Track preference (normalises the cross browser API differences). Returns `true`, `false` or `null` (no preference specified).


## License

consent-manager is released under the MIT license.

Copyright © 2018, Segment.io, Inc.


[analytics.js snippet]: https://segment.com/docs/sources/website/analytics.js/quickstart/#step-1-copy-the-snippet
[Inferno]: https://infernojs.org/
[currentScript]: https://caniuse.com/#feat=document-currentscript
[inEU]: https://github.com/segmentio/in-eu
[ConsentManager]: #consentmanager
[ConsentManagerBuilder]: #consentmanagerbuilder
[preact]: https://preactjs.com
[currentscript]: https://caniuse.com/#feat=document-currentscript
[ineu]: https://github.com/segmentio/in-eu
[consentmanager]: #consentmanager
[consentmanagerbuilder]: #consentmanagerbuilder
[top-domain]: https://github.com/segmentio/top-domain
[mapCustomPreferences]: #mapcustompreferences
[shouldRequireConsent]: #shouldrequireconsent-1
[mapcustompreferences]: #mapcustompreferences
[shouldrequireconsent]: #shouldrequireconsent-1
[preferences]: #preferences
[setPreferences]: #setpreferences
[ConsentManager implementation]: src/consent-manager
[CSS selector]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
[setpreferences]: #setpreferences
[consentmanager implementation]: src/consent-manager
[css selector]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Loading

0 comments on commit cb0514e

Please sign in to comment.