vite-plugin-radar

Analytics loader for vite that support Google Analytics, Google Tag Manager, Facebook Pixel, Linkedin Insight, Yandex Metrica, Baidu Tongji, Microsoft Advertising and Unbounce

Install

npm i --save-dev vite-plugin-radar # yarn add -D vite-plugin-radar

Add it to vite.config.js

// vite.config.js
import { VitePluginRadar } from 'vite-plugin-radar'

export default {
  plugins: [
    VitePluginRadar({
      // Google Analytics tag injection
      analytics: {
        id: 'G-XXXXX',
      },
    })
  ],
}

Options

// vite.config.js
import { VitePluginRadar } from 'vite-plugin-radar'

export default {
  plugins: [
    VitePluginRadar({
      /**
       * enable or disable scripts injection in development
       * default: false
       */
      enableDev: true,

      // Google Analytics (multiple tag can be set with an array)
      analytics: [
        {
          /**
           * Measurement id
           */
          id: 'G-XXXXX',

          /**
           * disable tracking for this measurement 
           *   window['ga-disable-MEASUREMENT_ID'] = true
           * @see https://developers.google.com/analytics/devguides/collection/ga4/disable-analytics
           */
          disable: true,

          /**
           * You can configure all settings provided by analytics here
           * @see https://developers.google.com/analytics/devguides/collection/ga4/cookies-user-id
           * @see https://developers.google.com/analytics/devguides/collection/ga4/disable-page-view
           * @see https://developers.google.com/analytics/devguides/collection/ga4/display-features
           */
          config: {
            cookie_domain: 'auto',
            cookie_expires: 63072000,
            cookie_prefix: 'none',
            cookie_update: true,
            cookie_flags: '',
            send_page_view: true,
            allow_google_signals: true,
            allow_ad_personalization_signals: true,
          },

          /**
           * Set default values for "consent mode"
           * @see https://developers.google.com/tag-platform/devguides/consent
           * @see https://support.google.com/analytics/answer/9976101
           */
          consentDefaults: {
            analytics_storage: 'granted',
            ad_storage: 'denied',
            wait_for_update: 500
          },

          /**
           * You set persitent values
           * @see https://developers.google.com/analytics/devguides/collection/ga4/persistent-values
           */
          persistentValues: {
            currency: 'USD',
          }
        },
        // You can add as many measurement id as you need
        {
          id: 'UA-YYYYY',
        },
      ],

      // Google Tag Manager (multiple tag can be set with an array)
      gtm: [
        {
          id: 'GTM-XXXXX',
          
          // You can set custom source for gtm script and noscript
          gtmBase: 'https://www.custom.com/gtm.js',
          nsBase: 'https://www.custom.com/ns.html',
          // You can optionally define the environment for the gtm.
          environment: {
            auth: 'X1YzAB2CDEFGh3ijklmnoP',
            preview: 'env-x',
          },
        }
      ],

      // Facebook Pixel (multiple tag can be set with an array)
      pixel: [
        {
          id: 'XXXXXXX',
        }
      ],

      // VK Retargeting (multiple tag can be set with an array)
      retargeting: [
        {
          id: 'VK-RTRG-XXXXXX-XXXXX',
        }
      ],

      // Linkedin Insight (multiple tag can be set with an array)
      linkedin: [
        {
          id: 'XXXXXXX',
        }
      ],

      // Baidu Tongji (multiple tag can be set with an array)
      tongji: [
        {
          id: 'XXXXXXX',
        }
      ],

      // Yandex Metrica (multiple tag can be set with an array)
      metrica: [
        {
          id: 'XXXXXXX',

          /**
           * You can configure all settings provided by metrika here
           * @see https://yandex.com/support/metrica/code/counter-initialize.html
           */
          config: {
            defer: true,
            clickmap: true,
            trackLinks: true,
            accurateTrackBounce: true,
            childIframe: true,
            webvisor: true,
            trackHash: true,
            triggerEvent: true,
            ecommerce: 'dataLayer',
            trustedDomains: ['example.com'],
            type: 0,
            params: {},
            userParams: {}
          }
        }
      ],

      // Microsoft Analytics (only one tag can be set)
      microsoft: {
        id: 'XXXXX'
      },

      // Hotjar Analytics (only one tag can be set)
      hotjar: {
        id: 1000000
      },

      // Full story Analytics (only one tag can be set)
      fullStory: {
        org: 'X-XXXXXX-XXX',
        host: 'fullstory.com',
        script: 'edge.fullstory.com/s/fs.js',
        namespace: 'FS',
      },
        
      // Unbounce conversion analytics
      // Can also be enabled like so: `unbounce: true`
      unbounce: {
        enabled: true, // or false
        // You can set a custom location or use the default one for unbounce
        script: 'd3pkntwtp2ukl5.cloudfront.net/uba.js'
      },

      // TikTok Pixel Analytics (only one tag can be set)
      tiktok: {
        id: 1000000,
        // You can set a custom location or use the default one for TikTok
        script: 'analytics.tiktok.com/i18n/pixel/events.js'
      },

      // SimpleAnalytics
      simpleanalytics: {
        enabled: true, // or false
        /**
         * You can overwrite domain name (optional)
         * @see https://docs.simpleanalytics.com/overwrite-domain-name
         */
        hostname: 'example.com',
        /**
         * You can configure a proxy (optional)
         * @see https://docs.simpleanalytics.com/proxy
         */
        script: 'https://example.com/proxy.js',
        noScript: 'https://example.com/simple/noscript.gif'
      },
      
      // Plausible
      plausible: {
        enabled: true, // or false
        /**
         * You can overwrite domain name to send stats to multiple Plausible dashboards (optional)
         * @see https://plausible.io/docs/plausible-script#can-i-send-stats-to-multiple-dashboards-at-the-same-time
         */
        hostname: 'example.com',
        /**
         * You can configure a proxy (optional)
         * @see https://plausible.io/docs/proxy/introduction
         */
        script: 'example.com/js/script.js',
      },
    })
  ],
}

Resources

• https://developers.google.com/analytics/devguides/collection/ga4
• https://developers.google.com/tag-manager/quickstart
• https://developers.facebook.com/docs/facebook-pixel/implementation
• https://www.linkedin.com/help/lms/answer/a427660
• https://yandex.com/support/metrica/quick-start.html
• https://tongji.baidu.com/open/api/more
• https://vk.com/faq14080
• https://help.ads.microsoft.com/#apex/ads/en/ext60065/
• https://help.hotjar.com/hc/en-us/articles/115009336727-How-to-Install-Your-Hotjar-Tracking-Code
• https://help.fullstory.com/hc/en-us/articles/360020623514-Installing-the-FullStory-Script#:~:text=Install%20your%20snippet%20directly%20on,closing%20tag.
• https://documentation.unbounce.com/hc/en-us/articles/203879180-Setting-Conversion-Goals-in-the-Classic-Builder