front-analytics-plug

Simple design for third-party time measurement tools.

Building manually

npm install @lx1084974046/package01

Example Usage In Vue Project

Vue App.vue component:
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import {
  googleAns,
  googleAds,
  facebookAds,
  tikTokAds
} from '@lx1084974046/package01';
export default {
  name: '',
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  mounted() {
    googleAns('UA-161928518-11');
    switch (this.$route.query.utm_source) {
      case 'google':
        googleAds('AW-10788263820');
        break;
      case 'facebook':
        facebookAds('6218909814845992');
        break;
      case 'tiktok':
        tikTokAds('C5RSQDC247C0IGAK3JKG');
        break;
    }
  }
};
</script>

Vue test.vue child-component:
<template>
  <div>
    <button @click="testGa">test</button>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    testGa() {
      window.ga('send', 'event', 'testga', 'click', 'PC');
      switch (this.$route.query.utm_source) {
        case 'google':
          window.gtag('event', 'conversion', {
            send_to: 'AW-10788263820/X9TaCPTs3_sCEIyvn5go' //AW-10788263820/X9TaCPTs3_sCEIyvn5go
          });
          break;
        case 'facebook':
          window.fbq('track', 'CompleteRegistration'); //CompleteRegistration
          break;
      }
    }
  }
};
</script>

<style scoped>
</style>

Methods

| 属性 | 类型 | 说明 | 参数 | |:----|:----|:----|:----| | googleAns | function | GA打点 | 事件ID(必传) | | googleAds | function | Google广告打点 | 事件ID(必传) | | facebookAds | function | Facebook打点 | 事件ID(必传) | | tikTokAds | function | TikTok打点 | 事件ID(必传) |