Code Monkey home page Code Monkey logo

vite-plugin-radar's Introduction

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

vite-plugin-radar's People

Contributors

avkulikov avatar bernd-altstaetter avatar diegoleme avatar iliasidash avatar imanbee avatar justjish avatar notclive avatar rossyman avatar ryadom avatar stafyniaksacha avatar tsifrer avatar twigmaester avatar wormss avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vite-plugin-radar's Issues

How does it work with Vue Router?

I was using vue-gtag but I'm not sure anymore if it is well maintained.

It has the possibility of passing the vue-router instance so that the routes are tracked. How does it work with this plugin? Is anything like that possible?

Not working on Remix

First of all, nice work overall, it's simple & efficient, worked on my stacks until now. For a new project, I use Remix and they are introduction vite to bundle everything in their latest version. When adding your plugin it flat out ignore it and doesn't generate anything within the HTML.

Is there a way to make it work?

Facebook pixel typings don't match documentation

In the version published at npm, the typings are:

declare type FacebookPixelOption = string | FacebookPixel;
declare type FacebookPixel = {
    /**
     * Pixel tag
     */
    id: string;
};

which contradicts what you describe in README:

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

(based on typings, arrays are not supported).

I believe you didn't actually publish the latest version?

Custom `injectTo`

Hello,

Currently as part of the HtmlTagDescriptor you add in tag/attrs/children, but there is no usage of injectTo which means it uses head-prepend as default.

I would like to set the injectTo as head.

I was hoping you would let us supply this in the properties.

I don't know if you would prefer root config level, or a per setting level..

I personally only use the google analytics, so it can be either/or for me, but I assume others may want to pick and choose?

Does seem easier if it's on a per options basis, since you currently only pass in the individual object to the functions... but just thought I would mention the possibility.

Vite 3

Hi! What about Vite-3 support?

Update Yandex-metrica url Tag (MetricaBase)

Hi.

For more flexibility, extend the variable configuration capability:

before:

const MetricaBase = 'https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js'

to:

const MetricaBase = 'https://mc.yandex.ru/metrika/tag.js'

Scripts always added on top of file

Hi.

I'm having a problem with the way the plugin adds the scripts to the head file of the index.html file. So, i'm using a Vue 3 typescript project with Vite, and when i try to add a script on top of my index.html file it does not add it as first, since this package always adds the scripts as first, therefore pushing my script below them.

Any solution to this?

Does not work plugin: ViteRadar is not a function

failed to load config from C:\................\vite.config.ts
error when starting dev server:
TypeError: ViteRadar is not a function
    at file:///C:/........./vite.config.ts.timestamp-1666597824334.mjs:10:7
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteRadar from 'vite-plugin-radar'

export default defineConfig(({ command, mode }) => {

	const env = loadEnv(mode, process.cwd(), '')
	return {
		plugins: [
			vue(),
			ViteRadar({
				enableDev: true,
				metrica: [
				  {
					id: '123445',					
					/**
					 * You can configure all settings provided by metrika here
					 * @see https://yandex.com/support/metrica/code/counter-initialize.html
					 */
					config: {
						clickmap: true,
						trackLinks: true,
						accurateTrackBounce: true,
						webvisor: true,
						trackHash: true,
						ecommerce: 'dataLayer'
					}
				  },
				]
			})
		],
	}
})

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.