Merge pull request #61 from MatteoGabriele/develop

feat(script-loader): add optional analytics script tag check

README.md

@@ -9,7 +9,7 @@
  <a href="https://www.npmjs.com/package/vue-analytics">
   <img src="https://img.shields.io/npm/dm/vue-analytics.svg" />
  <a/>
- 
+
  <img src="https://travis-ci.org/MatteoGabriele/vue-analytics.svg?branch=master" />
 </p>
 
@@ -30,6 +30,7 @@ npm install vue-analytics
 ## User guide
 
 * [Get started](/docs/installation.md)
+* [How to load Google Analytics](/docs/script-loader.md)
 * [Untracked hits](/docs/untracked-hits.md)
 * [Page tracking](/docs/page-tracking.md)
   * [Enable page auto tracking](/docs/page-tracking.md#enable-page-auto-tracking)
@@ -40,7 +41,7 @@ npm install vue-analytics
 * [Event tracking](/docs/event-tracking.md)
 * [User timings](/docs/user-timings.md#user-timings)
 * [Exception tracking](/docs/exception-tracking.md)
-  * [Enable exception auto tracking](/docs/exception-tracking.md#enable-exception-auto-tracking) 
+  * [Enable exception auto tracking](/docs/exception-tracking.md#enable-exception-auto-tracking)
 * [Require](/docs/require.md)
 * [Set](/docs/set.md)
 * [Social interactions](/docs/social-interactions.md)
@@ -55,4 +56,3 @@ npm install vue-analytics
 Please drop an issue, if you find something that doesn't work, or a feature request at [https://github.com/MatteoGabriele/vue-analytics/issues](https://github.com/MatteoGabriele/vue-analytics/issues)
 
 Follow me on twitter [@matteo\_gabriele](https://twitter.com/matteo_gabriele)
-

docs/debug.md

@@ -6,6 +6,7 @@ Implements Google Analaytics debug library.
 
 ```js
 Vue.use(VueAnalytics, {
+  id: 'UA-XXX-X',
   debug: {
     enabled: true,
     trace: false,
@@ -15,4 +16,3 @@ Vue.use(VueAnalytics, {
 ```
 
 Google Analytics docs: [debugging](https://developers.google.com/analytics/devguides/collection/analyticsjs/debugging)
-

docs/script-loader.md

@@ -0,0 +1,36 @@
+## How to load Google Analytics script
+
+By default nothing is needed: the plugin does everything for you!
+
+However, in some cases, you might want to avoid auto-loading the analytics.js script because:
+- maybe the framework you're using already does it for you
+- you really can't remove it from your project
+- other issue that I can't come up with
+
+So for all those cases it is possible to let the plugin detect if an analytics script has been added already in your html
+
+```js
+import Vue from 'vue'
+import VueAnalytics from 'vue-analytics'
+
+Vue.use(VueAnalytics, {
+  id: 'UA-XXX-X',
+  checkDuplicatedScript: true
+})
+```
+
+or just disable the script loader
+
+```js
+import Vue from 'vue'
+import VueAnalytics from 'vue-analytics'
+
+Vue.use(VueAnalytics, {
+  id: 'UA-XXX-X',
+  disableScriptLoader: true
+})
+```
+
+### Important
+It is not possible for the plugin to remove the initial trackers, because it needs them to create all methods for the multi-tracking feature.
+**If you can't remove initial trackers, don't use this plugin: the outcome could be unpredictable.**

src/bootstrap.js

@@ -1,6 +1,6 @@
 import load from 'load-script'
-import { onAnalyticsReady } from './helpers'
-import config from './config'
+import { onAnalyticsReady, hasGoogleScript } from './helpers'
+import config, { update } from './config'
 import createTrackers from './create-trackers'
 import untracked from 'lib/untracked'
 import { startAutoTracking as pageAutoTracking } from 'lib/page'
@@ -11,31 +11,44 @@ export default function bootstrap () {
     return
   }
 
-  const { id, debug, ready } = config
-  const filename = debug.enabled ? 'analytics_debug.js' : 'analytics.js'
+  const { id, ready, debug, checkDuplicatedScript, disableScriptLoader } = config
+  const filename = debug.enabled ? 'analytics_debug' : 'analytics'
+  const googleScript = `https://www.google-analytics.com/${filename}.js`
 
   if (!id) {
     throw new Error('[vue-analytics] Please enter a Google Analytics tracking ID')
   }
 
-  load(`https://www.google-analytics.com/${filename}`, function (error) {
-    if (error) {
-      console.error('[vue-analytics] It\'s not possible to load Google Analytics script')
-      return
+  return new Promise((resolve, reject) => {
+    if ((checkDuplicatedScript && hasGoogleScript(googleScript)) || disableScriptLoader) {
+      return resolve()
     }
 
-    onAnalyticsReady().then(() => {
-      // we first need to add trackers to be able to track
-      // every other aspect of the application
-      createTrackers()
-      // trigger the plugin `ready` callback right after the trackers
-      ready()
-      // add exceptions auto tracking
-      exceptionAutoTracking()
-      // add page auto tracking
-      pageAutoTracking()
-      // track every untracked events before analytics was ready
-      untracked()
+    load(googleScript, function (error) {
+      if (error) {
+        return reject('[vue-analytics] It\'s not possible to load Google Analytics script')
+      }
+
+      return resolve()
     })
   })
+  .then(() => {
+    return onAnalyticsReady()
+  })
+  .then(() => {
+    // we first need to add trackers to be able to track
+    // every other aspect of the application
+    createTrackers()
+    // trigger the plugin `ready` callback right after the trackers
+    ready()
+    // add exceptions auto tracking
+    exceptionAutoTracking()
+    // add page auto tracking
+    pageAutoTracking()
+    // track every untracked events before analytics was ready
+    untracked()
+  })
+  .catch(error => {
+    console.error(error)
+  })
 }

src/config.js

@@ -21,6 +21,9 @@ const defaultConfig = {
     sendHitTask: true
   },
 
+  checkDuplicatedScript: false,
+  disableScriptLoader: false,
+
   beforeFirstHit: noop,
   ready: noop,
 

src/helpers.js

@@ -14,6 +14,16 @@ export function merge (obj, src) {
   return obj
 }
 
+export function hasGoogleScript () {
+  const scriptTags = Array.prototype.slice.call(
+    document.getElementsByTagName('script')
+  ).filter(script => {
+    return script.src.indexOf('analytics') !== -1
+  })
+
+  return scriptTags.length > 0
+}
+
 export function getTracker (trackerId) {
   return trackerId.replace(/-/gi, '')
 }