From 9e4baa3719437b32603510479d378a225a38e0cf Mon Sep 17 00:00:00 2001 From: Yuri Ziebell Date: Mon, 20 May 2019 11:26:46 +0200 Subject: [PATCH] feat: add analytics tracking for website (#793) --- docs/privacypolicy.md | 4 +- packages/site/package.json | 5 ++- packages/site/src/releases.tsx | 43 ++++++++++++++++----- packages/site/src/site.tsx | 70 ++++++++++++++++++++++++++++++++-- yarn.lock | 13 +++++-- 5 files changed, 114 insertions(+), 21 deletions(-) diff --git a/docs/privacypolicy.md b/docs/privacypolicy.md index 699173442..7cd224f73 100644 --- a/docs/privacypolicy.md +++ b/docs/privacypolicy.md @@ -172,6 +172,8 @@ We only use Google Analytics with IP anonymisation enabled. This means that the The IP address transmitted by the user’s browser is not merged with other Google data. Users can prevent the storage of cookies by setting their browser software accordingly. In addition, you can disable the cookie’s sending of the data it has created concerning your use of this website (including your IP address) to Google and the processing of this data by Google if you download and install the browser plugin that is available under the following link: https://tools.google.com/dlpage/gaoptout?hl=en. + To opt-out from Google Analytics tracking for this site, visit https://www.meetalva.io and click "opt-out tracking" in the footer at the end of the page. + Our legitimate interest in data processing also lies in these purposes. The legal basis for the use of Google Analytics is § 15 para. 3 TMG and Art. 6 para. 1 lit. f GDPR. The data sent by us and linked to cookies, user-identifiers (e.g. User-IDs) or advertising-identifiers are automatically deleted after 26 months. Data whose retention period has been reached is automatically deleted once a month. ## Link to third parties @@ -180,4 +182,4 @@ You will find links to other websites on this website, directly or indirectly by We hereby expressly distance ourselves from all contents of these sites to which links are established and do not adopt these contents as our own. We do not have any influence on changes of the linked content. Our website may contain links to other providers’ websites, which are not covered by this data protection policy. To the extent that the use of websites of other providers involves the capture, processing and use of personal data, please refer to the data protection policy of the relevant provider. -Version: September 2018 +Version: May 2019 diff --git a/packages/site/package.json b/packages/site/package.json index 33ea5aa5a..c04a89cf1 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -21,12 +21,13 @@ }, "dependencies": { "@emotion/styled": "^10.0.6", - "@meetalva/alva-design": "^1.6.2", + "@meetalva/alva-design": "^1.6.3", "@types/react": "16.4.11", "@types/react-helmet": "5.0.6", "react": "16.4.2", "react-dom": "16.4.2", - "react-helmet": "5.2.0" + "react-helmet": "5.2.0", + "react-ga":"2.5.7" }, "devDependencies": { "@meetalva/tools": "1.0.0" diff --git a/packages/site/src/releases.tsx b/packages/site/src/releases.tsx index feb46f95c..fcc3b3591 100644 --- a/packages/site/src/releases.tsx +++ b/packages/site/src/releases.tsx @@ -3,6 +3,7 @@ import * as Path from 'path'; import * as D from '@meetalva/alva-design'; import styled from '@emotion/styled'; import data from './releases-data'; +const ReactGA = require('react-ga'); enum Os { macOS = 'macOS ', @@ -26,9 +27,19 @@ const StyledLink = color: ${props => (props.white ? D.Color.White : 'inherit')}; `; -const Link: React.SFC<{ href: string; white: boolean }> = props => { +const Link: React.SFC<{ + href: string; + white: boolean; + onClick?: React.MouseEventHandler; +}> = props => { return ( - + {props.children} ); @@ -64,22 +75,34 @@ export class Releases extends React.Component { getReleaseLink(stable, Os.Linux) ].filter(l => l.os !== stableLink.os); - console.log({ - releases: releases.map(r => r.tag_name), - alphaReleases: alphaReleases.map(a => a!.tag_name), - stableReleases: stableReleases.map(s => s!.tag_name) - }); - return (
- + + ReactGA.event({ + category: 'conversion', + action: 'Download Alva ' + this.state.os + }) + } + > Get Alva {this.state.os !== Os.Unknown ? `for` : ' '} {this.state.os} - + + ReactGA.event({ + category: 'conversion', + action: 'Download Canary ' + this.state.os + }) + } + > Get Alva Canary
diff --git a/packages/site/src/site.tsx b/packages/site/src/site.tsx index 1db30b543..f23e2cc4a 100644 --- a/packages/site/src/site.tsx +++ b/packages/site/src/site.tsx @@ -4,6 +4,27 @@ import * as D from '@meetalva/alva-design'; import { Releases } from './releases'; import { CookieNotice } from './cookie-notice'; +const ReactGA = require('react-ga'); + +const gaProperty = 'UA-111449801-1'; +const disableStr = 'ga-disable-' + gaProperty; + +if (typeof window !== 'undefined') { + if (document.cookie.indexOf(disableStr + '=true') > -1) { + window[disableStr] = true; + } +} + +function gaOptout() { + document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'; + window[disableStr] = true; + alert('Tracking is deactivated!'); +} + +ReactGA.initialize('UA-111449801-1'); +ReactGA.set({ anonymizeIp: true }); +ReactGA.pageview('/'); + export * from './render'; const Page: React.StatelessComponent = (): JSX.Element => { @@ -47,6 +68,12 @@ const Page: React.StatelessComponent = (): JSX.Element => { rel="noopener" href="./doc/docs/start" title="Open Getting Started Tutorial" + onClick={() => + ReactGA.event({ + category: 'menu', + action: 'Get started' + }) + } /> = (): JSX.Element => { rel="noopener" href="https://twitter.com/meetalva" title="Find us on Twitter" + onClick={() => + ReactGA.event({ + category: 'menu', + action: 'Twitter' + }) + } /> + ReactGA.event({ + category: 'menu', + action: 'GitHub' + }) + } /> + ReactGA.event({ + category: 'menu', + action: 'Chat with us' + }) + } /> @@ -300,8 +345,17 @@ const Page: React.StatelessComponent = (): JSX.Element => { - - + + + ReactGA.event({ + category: 'conversion', + action: 'Find our guides' + }) + } + > Find our Guides @@ -314,6 +368,12 @@ const Page: React.StatelessComponent = (): JSX.Element => { target="_blank" rel="noopener" href="https://sinnerschrader.com" + onClick={() => + ReactGA.event({ + category: 'menu', + action: 'S2' + }) + } /> = (): JSX.Element => { rel="noopener" href="./doc/docs/privacypolicy?guides-enabled=true" /> + + gaOptout()}>Opt-out tracking
diff --git a/yarn.lock b/yarn.lock index a2c77c635..552dcb351 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1013,10 +1013,10 @@ mkdirp "^0.5.1" rimraf "^2.5.2" -"@meetalva/alva-design@^1.6.2": - version "1.6.2" - resolved "https://registry.yarnpkg.com/@meetalva/alva-design/-/alva-design-1.6.2.tgz#c9890817b8cfa443e99bcb72994a7d6d50babd64" - integrity sha512-XnpY/WA/TYluWftDoKybhFPzWViRFQg83aYDEbU7uILLgrWYe1zPWVf+nJztrpr+1PYR5r6iisWpDoqhcIhm5g== +"@meetalva/alva-design@^1.6.3": + version "1.6.3" + resolved "https://registry.yarnpkg.com/@meetalva/alva-design/-/alva-design-1.6.3.tgz#ed8809654b5d6388d922cb91ae2e917fc86923ad" + integrity sha512-5MkRoB5kl+OZVrjeqMB7boeikr0GIarX4xAO4WQ5TM0zQK+USqP2B8uWsbPZQ0Sx5kgSvK0+CKUyLMA4EvvOAg== dependencies: "@emotion/core" "^10.0.6" "@emotion/styled" "^10.0.6" @@ -10083,6 +10083,11 @@ react-feather@^1.1.0, react-feather@^1.1.5: resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.5.tgz#f7f9384c17d2d061b5b8298f46efc0e497f48469" integrity sha512-hAPWatSFnhTNp9Ub96B7LMgOnWzXonA/LxqC2ANfUuc57jJocuWyO96yow2flUUDpitodh9mf6iOZzkyGYmAng== +react-ga@2.5.7: + version "2.5.7" + resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.5.7.tgz#1c80a289004bf84f84c26d46f3a6a6513081bf2e" + integrity sha512-UmATFaZpEQDO96KFjB5FRLcT6hFcwaxOmAJZnjrSiFN/msTqylq9G+z5Z8TYzN/dbamDTiWf92m6MnXXJkAivQ== + react-helmet@5.2.0, react-helmet@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7"