Vue-Analytics не работает (примечание: мне нужно изменить идентификатор на основе имени хоста) - PullRequest
0 голосов
/ 24 апреля 2018

Я пытаюсь использовать vue-analytics, но не получаю никаких данных (кроме случаев, когда я пробую их в localhost).

Наша ситуация уникальна, так как у нас разные домены для каждого клиента. Таким образом, идентификатор Google Analytics должен меняться в зависимости от имени хоста.

Я установил идентификатор для изменения в зависимости от имени window.location.hostname, но он все еще не работает.

Не могли бы вы сообщить, где я иду не так?

Спасибо

Sloan

p.s. - код ниже ...

import Vue from 'vue';
import VueSession from 'vue-session';
import stitcher from './components/stitcher.vue';
import * as auth from '@companyname/auth';
import * as dashboard from '@companyname/dashboard';
// import * as lgc from '@companyname/final-lgc';
import * as tasking from '@companyname/tasking';
import * as help from '@companyname/help';
import Router from 'vue-router';
import notFound from './components/notFound.vue';
import terms from './components/Terms.vue';
import privacy from './components/Privacy.vue';
import permissionDenied from './components/permissionDenied.vue';
import Vuetify from 'vuetify';
import * as GoogleMaps from 'vue2-google-maps';
import {get} from 'lodash';
import {ready} from '@companyname/interservice';
import VueAnalytics from 'vue-analytics'

import VueQuillEditor from 'vue-quill-editor';
import 'vuetify/dist/vuetify.min.css';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';
import abilityPlugin from './config/ability-plugin';
import abilities from './config/abilities';

window.vueGoogleMapsInit();
Vue.use(GoogleMaps, {
  load: {
    key: 'asdfasdfasdfasdfasdf',
    libraries: 'places'
  }
});

Vue.use(Router);
Vue.use(VueSession);
Vue.use(VueQuillEditor);
Vue.use(Vuetify);
Vue.use(abilityPlugin, abilities);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'dashboard',
      component: dashboard.app,
      meta: { requiresAuth: true },
      children: dashboard.routes()
    },
    {
      path: '/auth',
      component: auth.app,
      children: auth.routerConfig(),
      meta: {featureName: 'auth'}
    },
    /*
    {
      path: '/lgc',
      name: 'lgc',
      component: lgc.app,
      meta: {requiresAuth: true, featureFlag: {feature: 'lgc', description: 'LGC'}}
    },
    */
    {
      path: '/tasking',
      component: tasking.app,
      meta: {requiresAuth: true, featureName: 'tasking'},
      children: tasking.routes()
    },
    {
      path: '/assignment/task/:taskId',
      redirect: to => '/tasking' + to.path,
      props: true
    },
    {
      path: '/answers/task/:taskId',
      redirect: to => '/tasking' + to.path
    },
    {
      path: '/help',
      name: 'help',
      component: help.app,
      children: help.routes()
    },
    {
      path: '/terms',
      name: 'terms',
      component: terms
    },
    {
      path: '/privacy',
      name: 'privacy',
      component: privacy
    },
    {
      path: '/permissiondenied',
      name: 'permissiondenied',
      component: permissionDenied
    },
    {
      path: '*',
      component: notFound
    }
  ]
});

router.beforeEach(async (to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    let redirectPath;
    const loggedIn = await ready;
    const user = loggedIn.user || null;
    const featureFlag = get(to, 'meta.featureFlag.feature');
    if (!loggedIn) {
      if (localStorage.loggedOut && localStorage.loggedOut === 'true') {
        redirectPath = '/';
      } else {
        redirectPath = to.fullPath;
      }
      localStorage.loggedOut = 'done';
      next({
        path: '/auth',
        query: { redirect: redirectPath }
      });
    } else if (featureFlag) {
      const allowed = get(user, `featureFlags.${featureFlag}`);
      const description = get(to, 'meta.featureFlag.description');
      const fullPath = to.fullPath;
      if (allowed) {
        next();
      } else {
        next({
          path: '/permissiondenied',
          query: { description, fullPath }
        });
      }
    } else {
      next();
    }
  } else {
    next(); // make sure to always call next()!
  }
});

function getClientId(environment) {
  let uaId;
  switch (environment) {
    case 'customer1.companysite.com':
      uaId = 'UA‌-123456789-1';
      break;
    case 'customer2.companysite.com':
      uaId = 'UA‌-123456789-2';
      break;
    case 'customer3.companysite.com':
      uaId = 'UA‌-123456789-3';
      break;
    case 'customer4.companysite.com':
      uaId = 'UA‌-123456789-4';
      break;
    case 'customer5.companysite.com':
      uaId = 'UA‌-123456789-5';
      break;
    case 'customer6.companysite.com':
      uaId = 'UA‌-123456789-6';
      break;
    case 'customer7.companysite.com':
      uaId = 'UA‌-123456789-7';
      break;
    case 'customer8.companysite.com':
      uaId = 'UA‌-123456789-8';
      break;
    case 'localhost':
      uaId = 'UA-123456789-9';
      break;
    default:
      uaId = 'no_id';
      break;
  }
  console.log('id', uaId);
  return uaId;
}

let clientID = getClientId(window.location.hostname);

if (clientID !== 'no_id') {
  Vue.use(VueAnalytics, {
    id: clientID,
    router
  });
}

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(stitcher)
});
...