├── _config.yml ├── public ├── favicon.ico ├── manifest.json └── index.html ├── src ├── About.css ├── Header.css ├── Main.css ├── App.css ├── Home.js ├── Header.js ├── App.js ├── index.css ├── App.test.js ├── index.js ├── About.js ├── Main.js ├── logo.svg └── serviceWorker.js ├── .circleci └── config.yml ├── .gitignore ├── package.json ├── LICENSE ├── CREATE_REACT_APP.md └── README.md /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/segmentio/analytics-react/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/About.css: -------------------------------------------------------------------------------- 1 | .about-content { 2 | font-size: 24px; 3 | line-height: 1.3; 4 | margin: 0 30%; 5 | } 6 | -------------------------------------------------------------------------------- /src/Header.css: -------------------------------------------------------------------------------- 1 | .header-ul { 2 | list-style-type: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .header-ul > li { 8 | display: inline; 9 | padding: 30px; 10 | } 11 | -------------------------------------------------------------------------------- /src/Main.css: -------------------------------------------------------------------------------- 1 | .main-logo { 2 | animation: main-logo-spin infinite 20s linear; 3 | height: 40vmin; 4 | } 5 | 6 | @keyframes main-logo-spin { 7 | from { 8 | transform: rotate(0deg); 9 | } 10 | to { 11 | transform: rotate(360deg); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | working_directory: ~/analytics-react 5 | docker: 6 | - image: circleci/node:8.11 7 | steps: 8 | - checkout 9 | - run: npm install 10 | - run: npm test 11 | - run: npm run build 12 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | background-color: #282c34; 3 | min-height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | text-align: center; 9 | font-size: calc(10px + 2vmin); 10 | color: white; 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | 4 | export default class Home extends Component { 5 | componentDidMount() { 6 | window.analytics.page('Home'); 7 | } 8 | 9 | render() { 10 | return ( 11 |
12 |

Home

13 | logo 14 |
15 | ); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import './Header.css'; 4 | 5 | const Header = () => ( 6 |
7 | 17 |
18 | ); 19 | 20 | export default Header; 21 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Header from './Header'; 3 | import Main from './Main'; 4 | import './App.css'; 5 | 6 | class App extends Component { 7 | trackClickEvent(title) { 8 | window.analytics.track(title); 9 | } 10 | 11 | render() { 12 | return ( 13 |
14 |
15 |
16 |
17 | ); 18 | } 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | 16 | a { 17 | color: #61dafb; 18 | } 19 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { BrowserRouter } from 'react-router-dom'; 4 | import App from './App'; 5 | 6 | beforeEach(() => { 7 | global.window.analytics = { page: () => null }; 8 | }); 9 | 10 | afterEach(() => { 11 | global.window = undefined; 12 | }); 13 | 14 | it('renders without crashing', () => { 15 | const div = document.createElement('div'); 16 | ReactDOM.render( 17 | 18 | 19 | , 20 | div); 21 | ReactDOM.unmountComponentAtNode(div); 22 | }); 23 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { BrowserRouter } from 'react-router-dom'; 4 | import * as serviceWorker from './serviceWorker'; 5 | import App from './App'; 6 | import './index.css'; 7 | 8 | render(( 9 | 10 | 11 | 12 | ), document.getElementById('root')); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: http://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /src/About.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './About.css'; 3 | 4 | export default class About extends Component { 5 | componentDidMount() { 6 | window.analytics.page('About'); 7 | } 8 | 9 | render() { 10 | return ( 11 |
12 |

About

13 |

14 | Segment collects analytics data and sends it to 250+ apps with the flip of a switch (e.g. Google Analytics, Mixpanel, Optimizely, Facebook Ads, Slack, Sentry). You only need one snippet and you can turn integrations on and off whenever you want with no additional code. 15 |

16 |
17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/Main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch, Route } from 'react-router-dom'; 3 | import Home from './Home'; 4 | import About from './About'; 5 | import './Main.css'; 6 | 7 | const Main = ({ trackClickEvent }) => ( 8 |
9 | 10 | 11 | 12 | 13 |
14 |

15 | Edit src/App.js and save to reload. 16 |

17 | trackClickEvent('Learn React Link Clicked')} 22 | > 23 | Learn React 24 | 25 |
26 |
27 | ); 28 | 29 | export default Main; 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "analytics-react", 3 | "description": "The hassle-free way to integrate analytics into your React application.", 4 | "version": "1.0.0", 5 | "contributors": [ 6 | "William Grosset (https://williamgrosset.com)" 7 | ], 8 | "keywords": [ 9 | "create-react-app", 10 | "react", 11 | "segment", 12 | "analytics" 13 | ], 14 | "repository": "segmentio/analytics-react", 15 | "private": true, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "dependencies": { 23 | "react": "^16.7.0", 24 | "react-dom": "^16.7.0", 25 | "react-router-dom": "^4.3.1", 26 | "react-scripts": "2.1.3" 27 | }, 28 | "eslintConfig": { 29 | "extends": "react-app" 30 | }, 31 | "browserslist": [ 32 | ">0.2%", 33 | "not dead", 34 | "not ie <= 11", 35 | "not op_mini all" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © 2019 Segment.io, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 35 | 36 | 37 | 38 |
39 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /CREATE_REACT_APP.md: -------------------------------------------------------------------------------- 1 | # Development Documentation 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.
15 | You will also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.
25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.
28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 63 | 64 | ### Deployment 65 | 66 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 71 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Segment React Quickstart Guide 2 |
3 | 4 |

You can't fix what you can't measure

5 |
6 | 7 | Analytics helps you measure your users, product, and business. It unlocks insights into your app's funnel, core business metrics, and whether you have product-market fit. 8 | 9 | ## How to get started 10 | 1. **Collect analytics data** from your app(s). 11 | - The top 200 Segment companies collect data from 5+ source types (web, mobile, server, CRM, etc.). 12 | 2. **Send the data to analytics tools** (for example, Google Analytics, Amplitude, Mixpanel). 13 | - Over 250+ Segment companies send data to eight categories of destinations such as analytics tools, warehouses, email marketing and remarketing systems, session recording, and more. 14 | 3. **Explore your data** by creating metrics (for example, new signups, retention cohorts, and revenue generation). 15 | - The best Segment companies use retention cohorts to measure product market fit. Netflix has 70% paid retention after 12 months, 30% after 7 years. 16 | 17 | [Segment](https://segment.com?utm_source=github&utm_medium=click&utm_campaign=protos_react) collects analytics data and allows you to send it to more than 250 apps (such as Google Analytics, Mixpanel, Optimizely, Facebook Ads, Slack, Sentry) just by flipping a switch. You only need one Segment code snippet, and you can turn integrations on and off at will, with no additional code. [Sign up with Segment today](https://app.segment.com/signup?utm_source=github&utm_medium=click&utm_campaign=protos_react). 18 | 19 | ### Why? 20 | 1. **Power all your analytics apps with the same data**. Instead of writing code to integrate all of your tools individually, send data to Segment, once. 21 | 22 | 2. **Install tracking for the last time**. We're the last integration you'll ever need to write. You only need to instrument Segment once. Reduce all of your tracking code and advertising tags into a single set of API calls. 23 | 24 | 3. **Send data from anywhere**. Send Segment data from any device, and we'll transform and send it on to any tool. 25 | 26 | 4. **Query your data in SQL**. Slice, dice, and analyze your data in detail with Segment SQL. We'll transform and load your customer behavioral data directly from your apps into Amazon Redshift, Google BigQuery, or Postgres. Save weeks of engineering time by not having to invent your own data warehouse and ETL pipeline. 27 | 28 | For example, you can capture data on any app: 29 | ```js 30 | analytics.track('Order Completed', { price: 99.84 }) 31 | ``` 32 | Then, query the resulting data in SQL: 33 | ```sql 34 | select * from app.order_completed 35 | order by price desc 36 | ``` 37 | 38 | ### 🚀 Startup Program 39 |
40 | 41 |
42 | If you are part of a new startup (<$5M raised, <2 years since founding), we just launched a new startup program for you. You can get a Segment Team plan (up to $25,000 value in Segment credits) for free up to 2 years — apply here! 43 | 44 | # 🏃💨 Quickstart 45 | In this tutorial you'll add your write key to this React demo app to start sending data from the app to Segment, and from there to any of our destinations, using our [Analytics.js library](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/?utm_source=github&utm_medium=click&utm_campaign=protos_react). Once your app is set up, you'll be able to turn on new destinations with the click of a button! Ready to try it for yourself? Scroll down to the demo section and run the app! 46 | 47 | Start sending data from any [source](https://segment.com/docs/connections/sources/?utm_source=github&utm_medium=click&utm_campaign=protos_react) and see events live in the Segment **debugger**: 48 | 49 |
50 | 51 |
52 |
53 | 54 | Once you have data being sent to Segment, forward this data to any of our 250+ [destinations](https://segment.com/docs/connections/destinations/catalog/?utm_source=github&utm_medium=click&utm_campaign=protos_react): 55 | 56 |
57 | 58 |
59 | 60 | # 🔌 Installing on Your App 61 | How do you get this in your own React app? Follow the steps below. 62 | 63 | ## ✂️ Step 1: Copy the Snippet 64 | To install Segment in your own app first [sign up](https://app.segment.com/signup?utm_source=github&utm_medium=click&utm_campaign=protos_react) with Segment and locate your Segment project's **Write Key**. 65 | Then, copy and paste the snippet below into the `head` tag of your site. Replace `YOUR_WRITE_KEY` in the snippet below with your Segment project's write key. 66 | 67 | > **Tip!** You can find your write key in your Segment project setup guide or settings. 68 | 69 | ```html 70 | 76 | ``` 77 | Now `window.analytics` is loaded and available to use throughout your app! 78 | 79 | **Note**: If you are seeing compilation errors, you may need to declare the `windows` interface as a global: 80 | 81 | ```JS 82 | declare global { 83 | interface Window { analytics: any; } 84 | } 85 | ``` 86 | 87 | In the next sections you'll build out your implementation to track page loads, to identify individual users of your app, and track the actions they take. 88 | 89 | ## 📱 Step 2: Track Page Views in an SPA 90 | > **Tip!** If your React application is **not** a Single Page application, you can uncomment the section in the above snippet and skip to Step 3. 91 | 92 | The snippet from Step 1 loads `Analytics.js` into your app and is ready to track page loads. However, most React apps are a Single Page App (SPA), and in SPAs clicking a link or a new tab does not reload the whole webpage. 93 | 94 | The `page` method lets you record page views on your website, along with optional information about the page being viewed. You can read more about how this works in the [page reference](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/#page?utm_source=github&utm_medium=click&utm_campaign=protos_react). 95 | 96 | This means that using `analytics.page()` in `index.html` on a SPA will not detect page component loads, and you'll need to simulate a page load some other way. You can use [react-router](https://reacttraining.com/react-router) and React's lifecycle methods to create `page` calls. 97 | 98 | If you separate your pages into their own components and allow the [``](https://reacttraining.com/react-router/core/api/Route) component to handle when the page renders, you can use `componentDidMount` to invoke `page` calls. The example below shows one way you could do this. 99 | 100 | ```JSX 101 | export default class HomePage extends Component { 102 | componentDidMount() { 103 | window.analytics.page('Home'); 104 | } 105 | 106 | render() { 107 | return ( 108 |

109 | Home page. 110 |

111 | ); 112 | } 113 | } 114 | ``` 115 | 116 | ## 🔍 Step 3: Identify Users 117 | The `identify` method is how you tell Segment who the current user is. It includes a unique User ID and any optional traits you can pass on about them. You can read more about this in the [identify reference](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/#identify?utm_source=github&utm_medium=click&utm_campaign=protos_react). 118 | 119 | **Note:** You don't need to call `identify` for anonymous visitors to your site. Segment automatically assigns them an `anonymousId`, so just calling `page` and `track` still works just fine without `identify`. 120 | 121 | Here's what a basic call to `identify` might look like: 122 | 123 | ```javascript 124 | window.analytics.identify('f4ca124298', { 125 | name: 'Michael Bolton', 126 | email: 'mbolton@initech.com' 127 | }); 128 | ``` 129 | 130 | This call identifies Michael by his unique User ID and labels him with `name` and `email` traits. 131 | 132 | In React, if you have a form where users sign up or log in, you can use the `onSubmit` handler to call `identify`, as in the example below: 133 | 134 | ```js 135 | export default class IdentifyForm extends Component { 136 | state = { 137 | name: '', 138 | email: '' 139 | }; 140 | 141 | handleChange(event) { 142 | this.setState({ value: event.target.value }); 143 | } 144 | 145 | handleSubmit() { 146 | const { name, email } = this.state; 147 | 148 | // Add your own unique ID here or we will automatically assign an anonymousID 149 | window.analytics.identify({ 150 | name, 151 | email 152 | }); 153 | } 154 | 155 | render() { 156 | const { name, email } = this.state; 157 | 158 | return ( 159 |
160 | 161 | 162 | 163 |
164 | ); 165 | } 166 | } 167 | ``` 168 | 169 | > **Tip!** Other handlers might be better for other situations. You can see the [React docs on event handlers](https://reactjs.org/docs/handling-events.html) for more information. 170 | 171 | ## ⏰ Step 4: Track Actions 172 | The `track` method is how you tell Segment about which actions your users are performing on your site. Every action triggers what we call an "event", which can also have associated properties. It is important to figure out exactly what events you want to `track` instead of tracking anything and everything. A good way to do this is to build a [tracking plan](https://segment.com/docs/protocols/data-quality/whats-a-tracking-plan/?utm_source=github&utm_medium=click&utm_campaign=protos_react). You can read more about `track` in the [track reference](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/#track?utm_source=github&utm_medium=click&utm_campaign=protos_react). 173 | 174 | Here's what a call to `track` might look like when a user bookmarks an article: 175 | 176 | ```javascript 177 | window.analytics.track('Article Bookmarked', { 178 | title: 'Snow Fall', 179 | subtitle: 'The Avalanche at Tunnel Creek', 180 | author: 'John Branch' 181 | }); 182 | ``` 183 | 184 | The snippet tells us that the user just triggered the **Article Bookmarked** event, and the article they bookmarked was the `Snow Fall` article authored by `John Branch`. Properties can be anything you want to associate to an event when it is tracked. 185 | 186 | ### Track Calls with Event Handlers 187 | In React, you can use several event handlers, such as `onClick`, `onSubmit`, `onMouseOver`, to call the `track` events. In the example below, we use the `onClick` handler to make a `track` call to log a `User Signup`. 188 | 189 | ```JSX 190 | export default class SignupButton extends Component { 191 | trackEvent() { 192 | window.analytics.track('User Signup'); 193 | } 194 | 195 | render() { 196 | return ( 197 | 200 | ); 201 | } 202 | } 203 | ``` 204 | 205 | > **Tip!** Other handlers might be better for other situations. You can see the [React docs on event handlers](https://reactjs.org/docs/handling-events.html) for more information. 206 | 207 | ### Track Calls with Lifecycle Methods 208 | [Lifecycle methods](https://reactjs.org/docs/react-component.html#the-component-lifecycle) are also great for tracking particular events, and in fact we used a lifecycle method in Step 2 to track page component loads. For example, if you want to track components that are conditionally rendered from a parent component and that are outside the scope of a `page` call, then you can use `componentDidMount` to trigger a `track` event: 209 | 210 | ```JSX 211 | export default class VideoPlayer extends Component { 212 | componentDidMount() { 213 | window.analytics.track('Video Played'); 214 | } 215 | 216 | render() { 217 | return ( 218 | 221 | ); 222 | } 223 | } 224 | ``` 225 | 226 | ## 🤔 What's next? 227 | Once you've added a few track calls, **you're done**! You've successfully installed `Analytics.js` tracking. Now you're ready to see your data in the Segment dashboard, and turn on any destination tools. 🎉 228 | 229 | ## 🎓 Advanced 230 | Once you've mastered the basics, here are some advanced use cases you can apply with Segment. 231 | 232 | ### Track Calls for Error Logging 233 | You can also use `track` calls to log errors, using a higher-order component such as `ErrorBoundary` to wrap around child components. Then, when an error occurs you log the error with `track` and gracefully display the appropriate child component. In this example, when an error is caught by `componentDidCatch`, we set the state, `track` the error, and then the `ErrorComponent` will be rendered. 234 | 235 | ```JSX 236 | export default class ErrorBoundary extends Component { 237 | static propTypes = { 238 | /** 239 | * Fallback component to display when uncaught exceptions occur in a component tree: 240 | * function({ error: PropTypes.object, errorInfo: PropTypes.object }): PropTypes.node 241 | */ 242 | errorComponent: PropTypes.func 243 | }; 244 | 245 | static defaultProps = { 246 | errorComponent: () => null 247 | }; 248 | 249 | state = { 250 | error: null, 251 | errorInfo: null 252 | }; 253 | 254 | componentDidCatch(error, errorInfo) { 255 | const { error, errorInfo } = this.state; 256 | 257 | this.setState({ 258 | error, 259 | errorInfo 260 | }); 261 | 262 | window.analytics.track('JavaScript Error', { 263 | error, 264 | errorInfo 265 | }); 266 | } 267 | 268 | render() { 269 | const { error, errorInfo } = this.state; 270 | const { errorComponent: ErrorComponent, children } = this.props; 271 | 272 | return error ? ( 273 | 277 | ) : ( 278 | children 279 | ); 280 | } 281 | } 282 | ``` 283 | 284 | ### Typechecking with PropTypes 285 | You can use typechecking with [`prop-types`](https://reactjs.org/docs/typechecking-with-proptypes.html) to catch a lot of potential bugs and prevent handing down information in the wrong format. For example, you can enforce a format for `user` related objects which can help with data standardization. You can get creative with the traits you expect to be sent to Segment for `identify` and `track`: 286 | 287 | ```JSX 288 | export default class User extends Component { 289 | static propTypes = { 290 | id: PropTypes.string, 291 | identifyTraits: PropTypes.shape({ 292 | name: PropTypes.string.isRequired, 293 | email: PropTypes.string.isRequired, 294 | isAuthorized: PropTypes.bool.isRequired 295 | }), 296 | trackTitle: PropTypes.string, 297 | trackTraits: PropTypes.object 298 | }; 299 | 300 | identify() { 301 | const { id, identifyTraits } = this.props; 302 | 303 | window.analytics.identify(id, identifyTraits); 304 | } 305 | 306 | track() { 307 | const { trackTitle, trackTraits } = this.props; 308 | 309 | window.analytics.track(trackTitle, trackTraits); 310 | } 311 | 312 | render() { 313 | const { children } = this.props; 314 | 315 | return children; 316 | } 317 | } 318 | ``` 319 | 320 | If you love typechecking, you'll love our open-source project [typewriter](https://github.com/segmentio/typewriter), which enforces a strongly-typed tracking spec via a JSON schema. Interested more in data standardization? Check out our [protocols product](https://segment.com/product/protocols?utm_source=github&utm_medium=click&utm_campaign=protos_react) to improve data quality. 321 | 322 | You may wondering what you can be doing with all the raw data you are sending to Segment from your React app. With our [warehouses product](https://segment.com/product/warehouses?utm_source=github&utm_medium=click&utm_campaign=protos_react), your analysts and data engineers can shift focus from data normalization and pipeline maintenance to providing insights for business teams. Having the ability to query data directly in SQL and layer on visualization tools can take your product to the next level. 323 | 324 | ## 💾 Warehouses 325 | A warehouse is a special subset of destinations where we load data in bulk at a regular intervals, inserting and updating events and objects while automatically adjusting their schema to fit the data you've sent to Segment. We do the heavy lifting of capturing, schematizing, and loading your user data into your data warehouse of choice. 326 | 327 | Examples of data warehouses include Amazon Redshift, Google BigQuery, MySQL, and Postgres. 328 | 329 |
330 | 331 |
332 | 333 | ## 📺 Demo 334 | To start with this demo app, follow the instructions below: 335 | 336 | 1. [Sign up](https://app.segment.com/signup?utm_source=github&utm_medium=click&utm_campaign=protos_react) with Segment and edit the snippet in [index.html](https://github.com/segmentio/analytics-react/blob/master/public/index.html#L28) to replace `YOUR_WRITE_KEY` with your Segment **Write Key**. 337 | > **Tip!** You can find your key in your project setup guide or settings in the Segment. 338 | 339 | Your snippet will look something like the example below. 340 | 341 | ```html 342 | 347 | ``` 348 | 349 | 2. From the command line, use `npm install` to install the dependencies, then `npm start` to run the app. 350 | ```bash 351 | npm install 352 | npm start 353 | ``` 354 | 355 | 3. Go to the Segment site, and in the Debugger look at the live events being triggered in your app. You should see the following: 356 | - Page event: `Home` - When someone views the `home` page. 357 | - Page event: `About` - When someone views the `about` page. 358 | - Track event: `Learn React Link Clicked` - When someone clicks the "Learn React" link. 359 | 360 | Congrats! You're seeing live data from your demo React app in Segment! 🎉 361 | 362 | ## 🔒 What about privacy? 363 | Want to allow your visitors to control and customize their tracking preferences on your site? Integrate our [consent-manager](https://github.com/segmentio/consent-manager), which is imported via the snippet and uses our pre-built React component under the hood. 364 | 365 | ## 📝 Docs & Feedback 366 | Check out our full [Analytics.js reference](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/#track?utm_source=github&utm_medium=click&utm_campaign=protos_reactutm_source=github&utm_medium=click&utm_campaign=protos_react) to see what else is possible, or read about the [Tracking API methods](https://segment.com/docs/connections/sources/catalog/libraries/server/http-api/?utm_source=github&utm_medium=click&utm_campaign=protos_react) to get a sense for the bigger picture. If you have any questions, or see anywhere we can improve our documentation, [let us know](https://segment.com/contact?utm_source=github&utm_medium=click&utm_campaign=protos_react)! 367 | --------------------------------------------------------------------------------