├── .gitattributes ├── .gitignore ├── .babelrc ├── .editorconfig ├── example ├── About.js ├── Home.js └── index.js ├── circle.yml ├── __test__ └── index.test.js ├── src └── index.js ├── package.json ├── LICENSE └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | 5 | /dist* 6 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "presets": ["es2015", "vue"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /example/About.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'about', 3 | render(h) { 4 | return ( 5 |
6 | Home - About 7 |

About

8 |
9 | ) 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /example/Home.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'home', 3 | render(h) { 4 | return ( 5 |
6 | Home - About 7 |

Home

8 |
9 | ) 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | pre: 3 | - mkdir ~/.yarn-cache 4 | node: 5 | version: 7 6 | 7 | dependencies: 8 | pre: 9 | - curl -o- -L https://yarnpkg.com/install.sh | bash 10 | cache_directories: 11 | - "~/.yarn-cache" 12 | override: 13 | - yarn install 14 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import EVA from 'eva.js' 2 | import ga from '../src' 3 | import Home from './Home' 4 | import About from './About' 5 | 6 | const app = new EVA() 7 | 8 | app.router(route => [ 9 | route('/', Home), 10 | route('/about', About) 11 | ]) 12 | 13 | ga(app.$router, 'UA-54857209-12') 14 | 15 | app.start('#app') 16 | -------------------------------------------------------------------------------- /__test__/index.test.js: -------------------------------------------------------------------------------- 1 | import EVA from 'eva.js' 2 | import ga from '../src' 3 | import Home from '../example/Home' 4 | import About from '../example/About' 5 | 6 | test('should add script', () => { 7 | return new Promise(resolve => { 8 | document.body.innerHTML = '
' 9 | const app = new EVA() 10 | app.router(route => [ 11 | route('/', Home), 12 | route('/about', About) 13 | ]) 14 | ga(app.$router, 'UA-54857209-12') 15 | app.$router.afterEach(() => { 16 | const script = document.querySelector('script') 17 | expect(script.src).toBe('https://www.google-analytics.com/analytics.js') 18 | resolve() 19 | }) 20 | app.start('#app') 21 | }) 22 | }) 23 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* globals ga */ 2 | function appendScript() { 3 | const script = document.createElement('script') 4 | script.async = true 5 | script.src = 'https://www.google-analytics.com/analytics.js' 6 | document.body.appendChild(script) 7 | } 8 | 9 | function init(id) { 10 | if (!window.ga) { 11 | appendScript() 12 | window.ga = window.ga || function () { 13 | (ga.q = ga.q || []).push(arguments) 14 | } 15 | ga.l = Number(new Date()) 16 | ga('create', id, 'auto') 17 | } 18 | } 19 | 20 | function collect(url, id) { 21 | init(id) 22 | ga('set', 'page', url) 23 | ga('send', 'pageview') 24 | } 25 | 26 | export default function (router, id) { 27 | if (typeof router === 'function') { 28 | router(url => { 29 | collect(url, id) 30 | }) 31 | } else { 32 | router.afterEach(to => { 33 | collect(to.fullPath, id) 34 | }) 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-ga", 3 | "version": "1.1.0", 4 | "description": "Google Analytics for Vue.js", 5 | "license": "MIT", 6 | "repository": "egoist/vue-ga", 7 | "author": { 8 | "name": "EGOIST", 9 | "email": "0x142857@gmail.com", 10 | "url": "https://github.com/egoist" 11 | }, 12 | "engines": { 13 | "node": ">=4" 14 | }, 15 | "scripts": { 16 | "test": "jest && eslint src/*.js && npm run build", 17 | "build": "bili --file-name vue-ga.[format].js --format esm --format umd --module-name VueGa", 18 | "example": "vbuild example/index.js -d" 19 | }, 20 | "files": [ 21 | "dist" 22 | ], 23 | "main": "./dist/vue-ga.umd.js", 24 | "module": "./dist/vue-ga.esm.js", 25 | "keywords": [ 26 | "google analytics" 27 | ], 28 | "devDependencies": { 29 | "babel-preset-es2015": "^6.18.0", 30 | "babel-preset-vue": "^0.1.0", 31 | "bili": "^4.7.2", 32 | "eslint": "latest", 33 | "eslint-config-rem": "latest", 34 | "eva.js": "^1.3.0", 35 | "jest-cli": "^15.1.1" 36 | }, 37 | "eslintConfig": { 38 | "extends": "rem/esnext-browser" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) EGOIST <0x142857@gmail.com> (github.com/egoist) 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-ga 2 | 3 | [![NPM version](https://img.shields.io/npm/v/vue-ga.svg?style=flat-square)](https://npmjs.com/package/vue-ga) [![NPM downloads](https://img.shields.io/npm/dm/vue-ga.svg?style=flat-square)](https://npmjs.com/package/vue-ga) [![Build Status](https://img.shields.io/circleci/project/egoist/vue-ga/master.svg?style=flat-square)](https://circleci.com/gh/egoist/vue-ga) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat-square)](https://github.com/egoist/donate) 4 | 5 | Simple Google Analytics binding for Vue.js apps, 534 bytes gzipped. 6 | 7 | ## Install 8 | 9 | ```bash 10 | yarn add vue-ga 11 | ``` 12 | 13 | ## Usage 14 | 15 | ### vue-router 16 | 17 | ```js 18 | // ./router/index.js 19 | import VueRouter from 'vue-router' 20 | import ga from 'vue-ga' 21 | 22 | Vue.use(VueRouter) 23 | 24 | const router = new VueRouter() 25 | ga(router, 'UA-XXXXX-Y') 26 | 27 | export default router 28 | ``` 29 | 30 | ### non vue-router 31 | 32 | It works with all SPA, even in non-Vue apps, just invoke the `collect` function after route changes, for example: 33 | 34 | ```js 35 | ga(collect => { 36 | // when hash changes 37 | window.onhashchange = () => { 38 | collect(location.pathname + location.hash) 39 | } 40 | }, 'UA-XXXXX-Y') 41 | ``` 42 | 43 | ## Contributing 44 | 45 | 1. Fork it! 46 | 2. Create your feature branch: `git checkout -b my-new-feature` 47 | 3. Commit your changes: `git commit -am 'Add some feature'` 48 | 4. Push to the branch: `git push origin my-new-feature` 49 | 5. Submit a pull request :D 50 | 51 | ## Author 52 | 53 | **vue-ga** © [EGOIST](https://github.com/egoist), Released under the [MIT](https://egoist.mit-license.org/) License.
54 | Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/vue-ga/contributors)). 55 | 56 | > [egoistian.com](https://egoistian.com) · GitHub [@egoist](https://github.com/egoist) · Twitter [@rem_rin_rin](https://twitter.com/rem_rin_rin) 57 | --------------------------------------------------------------------------------