├── _config.yml
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── components
    │   ├── Home.vue
    │   ├── Link.vue
    │   └── About.vue
    ├── router
    │   └── index.js
    └── App.vue
├── .circleci
    └── config.yml
├── .gitignore
├── VUE_APP.md
├── LICENSE
├── package.json
└── README.md


/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/segmentio/analytics-vue/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/segmentio/analytics-vue/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import router from './router'
 3 | import App from './App'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | new Vue({
 8 |   router,
 9 |   render: createEle => createEle(App)
10 | }).$mount('#app')
11 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     working_directory: ~/analytics-vue
 5 |     docker:
 6 |       - image: circleci/node:8.11
 7 |     steps:
 8 |       - checkout
 9 |       - run: npm install
10 |       - run: npm run lint 
11 |       - run: npm run build
12 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Home</h1>
 4 |     <img src="../assets/logo.png">
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'Home',
11 |   mounted () {
12 |     window.analytics.page('Home')
13 |   }
14 | }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from '@/components/Home'
 4 | import About from '@/components/About'
 5 | 
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '/',
12 |       name: 'Home',
13 |       component: Home
14 |     },
15 |     {
16 |       path: '/about',
17 |       name: 'About',
18 |       component: About
19 |     }
20 |   ]
21 | })
22 | 


--------------------------------------------------------------------------------
/VUE_APP.md:
--------------------------------------------------------------------------------
 1 | # Developer Documentation
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm start
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/src/components/Link.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a
 3 |     href="https://vuejs.org"
 4 |     target="_blank"
 5 |     v-on:click="trackClickEvent"
 6 |    >
 7 |     {{ link }}
 8 |   </a>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: 'Link',
14 |   data () {
15 |     return {
16 |       link: 'Learn Vue'
17 |     }
18 |   },
19 |   methods: {
20 |     trackClickEvent () {
21 |       window.analytics.track('Learn Vue Link Clicked')
22 |     }
23 |   }
24 | }
25 | </script>
26 | 
27 | <style scoped>
28 | a {
29 |   color: #42b983;
30 |   font-size: 24px;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/components/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>About</h1>
 4 |     <p class="about-content">
 5 |       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.
 6 |     </p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'About',
13 |   mounted () {
14 |     window.analytics.page('About')
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | .about-content {
21 |   font-size: 23px;
22 |   line-height: 1.4;
23 |   margin: 0 35%;
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/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/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <nav>
 4 |       <ul class="header-ul">
 5 |         <li>
 6 |           <router-link class="router-link" to="/">Home</router-link>
 7 |         </li>
 8 |         <li>
 9 |           <router-link class="router-link" to="/about">About</router-link>
10 |         </li>
11 |       </ul>
12 |     </nav>
13 |     <router-view></router-view>
14 |     <p>Edit <code>src/App.vue</code> and save to reload.</p>
15 |     <Link />
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | import Link from '@/components/Link'
21 | 
22 | export default {
23 |   name: 'App',
24 |   components: {
25 |     Link
26 |   }
27 | }
28 | </script>
29 | 
30 | <style>
31 | #app {
32 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
33 |   -webkit-font-smoothing: antialiased;
34 |   -moz-osx-font-smoothing: grayscale;
35 |   color: #2c3e50;
36 |   min-height: 100vh;
37 |   display: flex;
38 |   flex-direction: column;
39 |   align-items: center;
40 |   justify-content: center;
41 |   text-align: center;
42 | }
43 | 
44 | #app > p {
45 |   font-size: 28px;
46 | }
47 | 
48 | #app > img {
49 |   padding: 15px 0;
50 | }
51 | 
52 | .header-ul {
53 |   list-style-type: none;
54 |   margin: 0;
55 |   padding: 0;
56 | }
57 | 
58 | .header-ul > li {
59 |   display: inline;
60 |   padding: 30px;
61 | }
62 | 
63 | .router-link {
64 |   color: #42b983;
65 |   padding: 30px;
66 |   font-size: 24px;
67 | }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "analytics-vue",
 3 |   "description": "The hassle-free way to integrate analytics into your Vue application.",
 4 |   "version": "1.0.0",
 5 |   "contributors": [
 6 |     "William Grosset (https://williamgrosset.com)"
 7 |   ],
 8 |   "keywords": [
 9 |     "segment",
10 |     "analytics",
11 |     "vue"
12 |   ],
13 |   "repository": "segmentio/analytics-vue",
14 |   "scripts": {
15 |     "start": "vue-cli-service serve",
16 |     "build": "vue-cli-service build",
17 |     "lint": "vue-cli-service lint"
18 |   },
19 |   "dependencies": {
20 |     "vue": "^2.5.21",
21 |     "vue-router": "^3.0.2"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "^3.3.0",
25 |     "@vue/cli-plugin-eslint": "^3.3.0",
26 |     "@vue/cli-service": "^3.3.0",
27 |     "babel-eslint": "^10.0.1",
28 |     "eslint": "^5.8.0",
29 |     "eslint-plugin-vue": "^5.0.0",
30 |     "vue-template-compiler": "^2.5.21"
31 |   },
32 |   "eslintConfig": {
33 |     "root": true,
34 |     "env": {
35 |       "node": true
36 |     },
37 |     "extends": [
38 |       "plugin:vue/essential",
39 |       "eslint:recommended"
40 |     ],
41 |     "rules": {},
42 |     "parserOptions": {
43 |       "parser": "babel-eslint"
44 |     }
45 |   },
46 |   "postcss": {
47 |     "plugins": {
48 |       "autoprefixer": {}
49 |     }
50 |   },
51 |   "browserslist": [
52 |     "> 1%",
53 |     "last 2 versions",
54 |     "not ie <= 8"
55 |   ]
56 | }
57 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Vue App</title>
 9 |     <script type="text/javascript">
10 |       !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
11 |       analytics.load("YOUR_WRITE_KEY"); // Add your Segment Write Key here
12 |       /*
13 |         If your application is NOT an SPA, uncomment analytics.page() to track the page view event.
14 |       */
15 |       // analytics.page();
16 |       }}();
17 |     </script>
18 |   </head>
19 |   <body>
20 |     <noscript>
21 |       <strong>Please enable JavaScript to continue.</strong>
22 |     </noscript>
23 |     <div id="app"></div>
24 |     <!-- built files will be auto injected -->
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Segment Vue Quickstart Guide
  2 | <div align="center">
  3 |   <img src="https://user-images.githubusercontent.com/16131737/52017744-245c3980-249d-11e9-822d-4565703c36c8.png"/>
  4 |   <p><b><i>You can't fix what you can't measure</i></b></p>
  5 | </div>
  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_vue) 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_vue).
 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 | <div align="center">
 40 |   <a href="https://segment.com/startups"><img src="https://user-images.githubusercontent.com/16131737/53128952-08d3d400-351b-11e9-9730-7da35adda781.png" /></a>
 41 | </div>
 42 | If you are part of a new startup  (&lt;$5M raised, &lt;2 years since founding), we just launched a new startup program for you. You can get a Segment Team plan  (up to <b>$25,000 value</b> in Segment credits) for free up to 2 years — <a href="https://segment.com/startups/">apply here</a>!
 43 | 
 44 | # 🏃💨 Quickstart
 45 | In this tutorial you'll add your write key to this Vue 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/sources/website/analytics.js?utm_source=github&utm_medium=click&utm_campaign=protos_vue). 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 <a href="#demo">demo section</a> and run the app!
 46 | 
 47 | Start sending data from any [source](https://segment.com/docs/guides/general/what-is-a-source?utm_source=github&utm_medium=click&utm_campaign=protos_vue) and see events live in the Segment **debugger**:
 48 | 
 49 | <div align="center">
 50 |   <img src="https://user-images.githubusercontent.com/16131737/52017555-87010580-249c-11e9-8848-896ac1f15daa.gif"/>
 51 | </div>
 52 | <br/>
 53 | 
 54 | Once you have data being sent to Segment, forward this data to any of our 250+ [destinations](https://segment.com/docs/guides/general/what-is-a-destination?utm_source=github&utm_medium=click&utm_campaign=protos_vue):
 55 | 
 56 | <div align="center">
 57 |   <img src="https://user-images.githubusercontent.com/16131737/52022151-78bae580-24ac-11e9-88ed-fb20a33eecfb.gif"/>
 58 | </div>
 59 | 
 60 | # 🔌 Installing on Your App
 61 | How do you get this in your own Vue 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_vue) 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 | <script type="text/javascript">
 71 |   !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
 72 |   analytics.load("YOUR_WRITE_KEY");
 73 |   // analytics.page() // Uncomment if your application is NOT an SPA
 74 |   }}();
 75 | </script>
 76 | ```
 77 | Now `window.analytics` is loaded and available to use throughout your app!
 78 | 
 79 | 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.
 80 | 
 81 | ## 📱 Step 2: Track Page Views in an SPA
 82 | > **Tip!** If your Vue application is **not** a Single Page application, you can uncomment the section in the above snippet and skip to Step 3.
 83 | 
 84 | The snippet from Step 1 loads `Analytics.js` into your app and is ready to track page loads. However, most Vue apps are a Single Page App (SPA), and in SPAs clicking a link or a new tab does not reload the whole webpage.
 85 | 
 86 | 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/sources/website/analytics.js/#page?utm_source=github&utm_medium=click&utm_campaign=protos_vue).
 87 | 
 88 | 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 [vue-router](https://router.vuejs.org) and Vue's lifecycle hooks to create `page` calls.
 89 | 
 90 | If you separate your pages into their own components and allow the [`<router-view>`](https://router.vuejs.org/api/#router-view) component to handle when the page renders, you can use `mounted` to invoke `page` calls. The example below shows one way you could do this.
 91 | 
 92 | ```html
 93 | <template>
 94 |   <h1>
 95 |     Home page.
 96 |   </h1>
 97 | </template>
 98 | <script>
 99 | export default {
100 |   name: 'HomePage',
101 |   mounted () {
102 |     window.analytics.page('Home')
103 |   }
104 | }
105 | </script>
106 | ```
107 | 
108 | ## 🔍 Step 3: Identify Users
109 | 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/sources/website/analytics.js/#identify?utm_source=github&utm_medium=click&utm_campaign=protos_vue).
110 | 
111 | **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`.
112 | 
113 | Here's what a basic call to `identify` might look like:
114 | 
115 | ```javascript
116 | window.analytics.identify('f4ca124298', {
117 |   name: 'Michael Bolton',
118 |   email: 'mbolton@initech.com'
119 | });
120 | ```
121 | 
122 | This call identifies Michael by his unique User ID and labels him with `name` and `email` traits.
123 | 
124 | In Vue, if you have a form where users sign up or log in, you can use the `v-on:submit` handler to call `identify`, as in the example below:
125 | 
126 | ```html
127 | <template>
128 |   <form v-on:submit="handleSubmit">
129 |     <input name="name" type="text" v-model="name">
130 |     <input name="email" type="email" v-model="email">
131 |     <input type="submit" value="Submit">
132 |   </form>
133 | </template>
134 | 
135 | <script>
136 | export default {
137 |   name: 'IdentifyForm',
138 |   data: {
139 |     name: '',
140 |     email: ''
141 |   },
142 |   methods: {
143 |     handleSubmit () {
144 |       // Add your own unique ID here or we will automatically assign an anonymousID
145 |       window.analytics.identify({
146 |         name: this.name,
147 |         email: this.email
148 |       })
149 |     }
150 |   }
151 | }
152 | </script>
153 | ```
154 | 
155 | > **Tip!** Other handlers might be better for other situations. You can see the [Vue docs on event handlers](https://vuejs.org/v2/guide/events.html) for more information.
156 | 
157 | ## ⏰ Step 4: Track Actions
158 | 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/guides/sources/can-i-see-an-example-of-a-tracking-plan?utm_source=github&utm_medium=click&utm_campaign=protos_vue). You can read more about `track` in the [track reference](https://segment.com/docs/sources/website/analytics.js/#track?utm_source=github&utm_medium=click&utm_campaign=protos_vue).
159 | 
160 | Here's what a call to `track` might look like when a user bookmarks an article:
161 | 
162 | ```javascript
163 | window.analytics.track('Article Bookmarked', {
164 |   title: 'Snow Fall',
165 |   subtitle: 'The Avalanche at Tunnel Creek',
166 |   author: 'John Branch'
167 | });
168 | ```
169 | 
170 | 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.
171 | 
172 | ### Track Calls with Event Handlers
173 | In Vue, you can use several event handlers, such as `v-on:click`, `v-on:submit`, `v-on:mouseover`, to call the `track` events. In the example below, we use the `v-on:click` handler to make a `track` call to log a `User Signup`.
174 | 
175 | ```html
176 | <template>
177 |   <button v-on:click="trackEvent">
178 |     {{ title }}
179 |   </button>
180 | </template>
181 | 
182 | <script>
183 | export default {
184 |   name: 'SignupButton',
185 |   data() {
186 |     return {
187 |       title: 'Signup with Segment today!'
188 |     }
189 |   },
190 |   methods: {
191 |     trackEvent () {
192 |       window.analytics.track('User Signup')
193 |     }
194 |   }
195 | }
196 | </script>
197 | ```
198 | 
199 | > **Tip!** Other handlers might be better for other situations. You can see the [Vue docs on event handlers](https://vuejs.org/v2/guide/events.html) for more information.
200 | 
201 | ### Track Calls with Lifecycle Hooks
202 | [Lifecycle hooks](https://vuejs.org/v2/api/#Options-Lifecycle-Hooks) are also great for tracking particular events, and in fact we used a lifecycle hook 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 `mounted` to trigger a `track` event:
203 | 
204 | ```html
205 | <template>
206 |   <video autoplay>
207 |     <source src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" type="video/youtube">
208 |   </video>
209 | </template>
210 | 
211 | <script>
212 | export default {
213 |   name: 'VideoPlayer',
214 |   mounted () {
215 |     window.analytics.track('Video Played')
216 |   }
217 | }
218 | </script>
219 | ```
220 | 
221 | ### Track Calls with Transitions
222 | [Transition components](https://vuejs.org/v2/guide/transitions.html) components control when UI elements render. The transition hooks, `beforeEnter`, `enter`, `enterCancelled`, and `leave` are fired for different times in a component lifecycle. In this example, when the `Toggle` button is clicked, some text is rendered, and the `afterEnter` hook fires a `track` event.
223 | 
224 | ```html
225 | <template>
226 |   <div>
227 |     <button v-on:click="show = !show">
228 |       {{ title }}
229 |     </button>
230 |     <transition v-on:after-enter="afterEnter">
231 |       <p v-if="show">
232 |         {{ text }}
233 |       </p>
234 |     </transition>
235 |   </div>
236 | </template>
237 | 
238 | <script>
239 | export default {
240 |   name: 'DestinationsToggle',
241 |   data() {
242 |     return {
243 |       show: false,
244 |       title: 'Toggle',
245 |       text: 'Integrate with over 200+ destinations!'
246 |     }
247 |   },
248 |   methods: {
249 |     afterEnter (el) {
250 |       window.analytics.track('Destinations Info Toggled')
251 |     }
252 |   }
253 | }
254 | </script>
255 | ```
256 | 
257 | ## 🤔 What's next?
258 | 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. 🎉
259 | 
260 | ## 🎓 Advanced
261 | Once you've mastered the basics, here are some advanced use cases you can apply with Segment.
262 | 
263 | ### Track Calls for Error Logging
264 | 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 `errorCaptured`, we set our `error` boolean to `true`, `track` the error, and then the `errorComponent` will be rendered.
265 | 
266 | ```html
267 | <script>
268 | import DefaultErrorComponent from './DefaultErrorComponent.vue'
269 | 
270 | export default {
271 |   name: 'ErrorBoundary',
272 |   props: {
273 |     errorComponent: {
274 |       type: Object,
275 |       default: () => DefaultErrorComponent
276 |     }
277 |   },
278 |   data() {
279 |     return {
280 |       error: false
281 |     }
282 |   },
283 |   errorCaptured (err, vm, info) {
284 |     this.error = true
285 | 
286 |     window.analytics.track('JavaScript Error', {
287 |       error: err,
288 |       errorInfo: info
289 |     })
290 |   },
291 |   render (h) {
292 |     return this.error ? h(this.errorComponent) : this.$slots.default[0]
293 |   }
294 | }
295 | </script>
296 | ```
297 | 
298 | ### Typechecking with PropTypes
299 | You can use typechecking with [`prop-types`](https://vuejs.org/v2/guide/components-props.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`:
300 | 
301 | ```html
302 | <script>
303 | // Object with type declaration is only valid with Typescript
304 | type IdentifyTraits = {
305 |   name: string
306 |   email: string
307 |   isAuthorized: boolean
308 | }
309 | 
310 | export default {
311 |   name: 'User',
312 |   props: {
313 |     id: String,
314 |     identifyTraits: Object as () => IdentifyTraits,
315 |     trackTitle: String,
316 |     trackTraits: Object
317 |   },
318 |   render () {
319 |     return this.$slots.default[0]
320 |   }
321 | }
322 | </script>
323 | ```
324 | 
325 | Interested more in data standardization? Check out our [protocols product](https://segment.com/product/protocols?utm_source=github&utm_medium=click&utm_campaign=protos_vue) to improve data quality.
326 | 
327 | You may wondering what you can be doing with all the raw data you are sending to Segment from your Vue app. With our [warehouses product](https://segment.com/product/warehouses?utm_source=github&utm_medium=click&utm_campaign=protos_vue), 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.
328 | 
329 | ## 💾 Warehouses
330 | 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.
331 | 
332 | Examples of data warehouses include Amazon Redshift, Google BigQuery, MySQL, and Postgres.
333 | 
334 | <div align="center">
335 |   <img src="https://user-images.githubusercontent.com/16131737/52022132-6a6cc980-24ac-11e9-8e09-8606531a5dc7.gif"/>
336 | </div>
337 | 
338 | ## 📺 <span name="demo">Demo</span>
339 | To start with this demo app, follow the instructions below:
340 | 
341 | 1. [Sign up](https://app.segment.com/signup?utm_source=github&utm_medium=click&utm_campaign=protos_vue) with Segment and edit the snippet in [index.html](https://github.com/segmentio/analytics-vue/blob/master/public/index.html#L11) to replace `YOUR_WRITE_KEY` with your Segment **Write Key**.
342 |     > **Tip!** You can find your key in your project setup guide or settings in the Segment.
343 | 
344 |     Your snippet will look something like the example below.
345 | 
346 |     ```html
347 |     <script type="text/javascript">
348 |       !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
349 |       analytics.load("YOUR_WRITE_KEY");
350 |       }}();
351 |     </script>
352 |     ```
353 | 
354 | 2. From the command line, use `npm install` to install the dependencies, then `npm start` to run the app.
355 |     ```bash
356 |     npm install
357 |     npm start
358 |     ```
359 | 
360 | 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:
361 |     - Page event: `Home` - When someone views the `home` page.
362 |     - Page event: `About` - When someone views the `about` page.
363 |     - Track event: `Learn Vue Link Clicked` - When someone clicks the "Learn Vue" link.
364 | 
365 | Congrats! You're seeing live data from your demo Vue app in Segment! 🎉
366 | 
367 | ## 📝 Docs & Feedback
368 | Check out our full [Analytics.js reference](https://segment.com/docs/sources/website/analytics.js?utm_source=github&utm_medium=click&utm_campaign=protos_vue) to see what else is possible, or read about the [Tracking API methods](https://segment.com/docs/sources/server/http?utm_source=github&utm_medium=click&utm_campaign=protos_vue) 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_vue)!
369 | 


--------------------------------------------------------------------------------