From 526929647542d2e1cbedbdbf7ee182105c5a6a07 Mon Sep 17 00:00:00 2001 From: Twigmaester Date: Thu, 23 May 2024 12:46:30 +0200 Subject: [PATCH 1/2] undo linte --- README.md | 121 +++++++++++++++++++++++------------------ example/vite.config.ts | 5 ++ src/index.ts | 7 +++ src/plausible.ts | 36 ++++++++++++ 4 files changed, 115 insertions(+), 54 deletions(-) create mode 100644 src/plausible.ts diff --git a/README.md b/README.md index f6d5ad6..2e524e2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # vite-plugin-radar -Analytics loader for vite that support Google Analytics, Google Tag Manager, Facebook Pixel, +Analytics loader for vite that support Google Analytics, Google Tag Manager, Facebook Pixel, Linkedin Insight, Yandex Metrica, Baidu Tongji, Microsoft Advertising and Unbounce ### Install @@ -13,26 +13,25 @@ npm i --save-dev vite-plugin-radar # yarn add -D vite-plugin-radar ```ts // vite.config.js -import { VitePluginRadar } from 'vite-plugin-radar' +import { VitePluginRadar } from "vite-plugin-radar"; export default { plugins: [ VitePluginRadar({ // Google Analytics tag injection analytics: { - id: 'G-XXXXX', + id: "G-XXXXX", }, - }) + }), ], -} +}; ``` - ## Options ```ts // vite.config.js -import { VitePluginRadar } from 'vite-plugin-radar' +import { VitePluginRadar } from "vite-plugin-radar"; export default { plugins: [ @@ -49,10 +48,10 @@ export default { /** * Measurement id */ - id: 'G-XXXXX', + id: "G-XXXXX", /** - * disable tracking for this measurement + * disable tracking for this measurement * window['ga-disable-MEASUREMENT_ID'] = true * @see https://developers.google.com/analytics/devguides/collection/ga4/disable-analytics */ @@ -65,11 +64,11 @@ export default { * @see https://developers.google.com/analytics/devguides/collection/ga4/display-features */ config: { - cookie_domain: 'auto', + cookie_domain: "auto", cookie_expires: 63072000, - cookie_prefix: 'none', + cookie_prefix: "none", cookie_update: true, - cookie_flags: '', + cookie_flags: "", send_page_view: true, allow_google_signals: true, allow_ad_personalization_signals: true, @@ -81,9 +80,9 @@ export default { * @see https://support.google.com/analytics/answer/9976101 */ consentDefaults: { - analytics_storage: 'granted', - ad_storage: 'denied', - wait_for_update: 500 + analytics_storage: "granted", + ad_storage: "denied", + wait_for_update: 500, }, /** @@ -91,63 +90,63 @@ export default { * @see https://developers.google.com/analytics/devguides/collection/ga4/persistent-values */ persistentValues: { - currency: 'USD', - } + currency: "USD", + }, }, // You can add as many measurement id as you need { - id: 'UA-YYYYY', + id: "UA-YYYYY", }, ], // Google Tag Manager (multiple tag can be set with an array) gtm: [ { - id: 'GTM-XXXXX', - + 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', + 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', + auth: "X1YzAB2CDEFGh3ijklmnoP", + preview: "env-x", }, - } + }, ], // Facebook Pixel (multiple tag can be set with an array) pixel: [ { - id: 'XXXXXXX', - } + id: "XXXXXXX", + }, ], // VK Retargeting (multiple tag can be set with an array) retargeting: [ { - id: 'VK-RTRG-XXXXXX-XXXXX', - } + id: "VK-RTRG-XXXXXX-XXXXX", + }, ], // Linkedin Insight (multiple tag can be set with an array) linkedin: [ { - id: 'XXXXXXX', - } + id: "XXXXXXX", + }, ], // Baidu Tongji (multiple tag can be set with an array) tongji: [ { - id: 'XXXXXXX', - } + id: "XXXXXXX", + }, ], // Yandex Metrica (multiple tag can be set with an array) metrica: [ { - id: 'XXXXXXX', + id: "XXXXXXX", /** * You can configure all settings provided by metrika here @@ -162,46 +161,46 @@ export default { webvisor: true, trackHash: true, triggerEvent: true, - ecommerce: 'dataLayer', - trustedDomains: ['example.com'], + ecommerce: "dataLayer", + trustedDomains: ["example.com"], type: 0, params: {}, - userParams: {} - } - } + userParams: {}, + }, + }, ], // Microsoft Analytics (only one tag can be set) microsoft: { - id: 'XXXXX' + id: "XXXXX", }, // Hotjar Analytics (only one tag can be set) hotjar: { - id: 1000000 + 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', + 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' + 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' + script: "analytics.tiktok.com/i18n/pixel/events.js", }, // SimpleAnalytics @@ -211,20 +210,34 @@ export default { * You can overwrite domain name (optional) * @see https://docs.simpleanalytics.com/overwrite-domain-name */ - hostname: 'example.com', + 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' + 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 diff --git a/example/vite.config.ts b/example/vite.config.ts index 7806260..d2f9598 100644 --- a/example/vite.config.ts +++ b/example/vite.config.ts @@ -39,6 +39,11 @@ export default defineConfig({ // script: 'https://example.com/proxy.js', // noScript: 'https://example.com/simple/noscript.gif', // }, + // plausible: { + // enabled: true, + // hostname: 'www.custom.com', + // script: 'https://example.com/js/script.js', + // }, }), ], }) diff --git a/src/index.ts b/src/index.ts index 7f52d2d..4941bc4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -25,6 +25,8 @@ import type { TikTokPixelOptions } from './tiktok-pixel' import injectTikTokPixel from './tiktok-pixel' import type { SimpleAnalyticsOptions } from './simple-analytics' import injectSimpleAnalytics from './simple-analytics' +import type { PlausibleAnalyticsOptions } from './plausible' +import injectPlausible from './plausible' export interface VitePluginRadarOptions { enableDev?: boolean @@ -41,6 +43,7 @@ export interface VitePluginRadarOptions { unbounce?: UnbounceOptions | boolean tiktok?: TikTokPixelOptions simpleanalytics?: SimpleAnalyticsOptions + plausible?: PlausibleAnalyticsOptions } export function VitePluginRadar({ @@ -58,6 +61,7 @@ export function VitePluginRadar({ unbounce, tiktok, simpleanalytics, + plausible, }: VitePluginRadarOptions): Plugin { let viteConfig: ResolvedConfig @@ -114,6 +118,9 @@ export function VitePluginRadar({ if (simpleanalytics) tags.push(...injectSimpleAnalytics(simpleanalytics)) + if (plausible) + tags.push(...injectPlausible(plausible)) + return tags }, } diff --git a/src/plausible.ts b/src/plausible.ts new file mode 100644 index 0000000..d4ac8c7 --- /dev/null +++ b/src/plausible.ts @@ -0,0 +1,36 @@ +import type { HtmlTagDescriptor } from 'vite' + +export interface PlausibleAnalyticsOptions { + enabled: boolean + hostname?: string + script?: string +} + +/** + * @see https://plausible.io/docs/plausible-script + */ +const DefaultScriptUrl = 'https://plausible.io/js/script.js' + +function injectTag(options: PlausibleAnalyticsOptions): HtmlTagDescriptor[] { + const tags: HtmlTagDescriptor[] = [] + + if (!options.enabled) + return tags + + const scriptAttrs: Record = { + src: options.script || DefaultScriptUrl, + defer: true, + } + + if (options.hostname) + scriptAttrs['data-domain'] = options.hostname + + tags.push({ + tag: 'script', + injectTo: 'head', + attrs: scriptAttrs, + }) + + return tags +} +export default injectTag From f1419b4f6c25c6d205bffbc5c79db305e14c5eb5 Mon Sep 17 00:00:00 2001 From: Twigmaester Date: Thu, 23 May 2024 12:51:04 +0200 Subject: [PATCH 2/2] feat: add support for Plausible --- README.md | 112 +++++++++++++++++++++++++++--------------------------- 1 file changed, 57 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 2e524e2..9106cb7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # vite-plugin-radar -Analytics loader for vite that support Google Analytics, Google Tag Manager, Facebook Pixel, +Analytics loader for vite that support Google Analytics, Google Tag Manager, Facebook Pixel, Linkedin Insight, Yandex Metrica, Baidu Tongji, Microsoft Advertising and Unbounce ### Install @@ -13,25 +13,26 @@ npm i --save-dev vite-plugin-radar # yarn add -D vite-plugin-radar ```ts // vite.config.js -import { VitePluginRadar } from "vite-plugin-radar"; +import { VitePluginRadar } from 'vite-plugin-radar' export default { plugins: [ VitePluginRadar({ // Google Analytics tag injection analytics: { - id: "G-XXXXX", + id: 'G-XXXXX', }, - }), + }) ], -}; +} ``` + ## Options ```ts // vite.config.js -import { VitePluginRadar } from "vite-plugin-radar"; +import { VitePluginRadar } from 'vite-plugin-radar' export default { plugins: [ @@ -48,10 +49,10 @@ export default { /** * Measurement id */ - id: "G-XXXXX", + id: 'G-XXXXX', /** - * disable tracking for this measurement + * disable tracking for this measurement * window['ga-disable-MEASUREMENT_ID'] = true * @see https://developers.google.com/analytics/devguides/collection/ga4/disable-analytics */ @@ -64,11 +65,11 @@ export default { * @see https://developers.google.com/analytics/devguides/collection/ga4/display-features */ config: { - cookie_domain: "auto", + cookie_domain: 'auto', cookie_expires: 63072000, - cookie_prefix: "none", + cookie_prefix: 'none', cookie_update: true, - cookie_flags: "", + cookie_flags: '', send_page_view: true, allow_google_signals: true, allow_ad_personalization_signals: true, @@ -80,9 +81,9 @@ export default { * @see https://support.google.com/analytics/answer/9976101 */ consentDefaults: { - analytics_storage: "granted", - ad_storage: "denied", - wait_for_update: 500, + analytics_storage: 'granted', + ad_storage: 'denied', + wait_for_update: 500 }, /** @@ -90,63 +91,63 @@ export default { * @see https://developers.google.com/analytics/devguides/collection/ga4/persistent-values */ persistentValues: { - currency: "USD", - }, + currency: 'USD', + } }, // You can add as many measurement id as you need { - id: "UA-YYYYY", + id: 'UA-YYYYY', }, ], // Google Tag Manager (multiple tag can be set with an array) gtm: [ { - id: "GTM-XXXXX", - + 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", + 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", + auth: 'X1YzAB2CDEFGh3ijklmnoP', + preview: 'env-x', }, - }, + } ], // Facebook Pixel (multiple tag can be set with an array) pixel: [ { - id: "XXXXXXX", - }, + id: 'XXXXXXX', + } ], // VK Retargeting (multiple tag can be set with an array) retargeting: [ { - id: "VK-RTRG-XXXXXX-XXXXX", - }, + id: 'VK-RTRG-XXXXXX-XXXXX', + } ], // Linkedin Insight (multiple tag can be set with an array) linkedin: [ { - id: "XXXXXXX", - }, + id: 'XXXXXXX', + } ], // Baidu Tongji (multiple tag can be set with an array) tongji: [ { - id: "XXXXXXX", - }, + id: 'XXXXXXX', + } ], // Yandex Metrica (multiple tag can be set with an array) metrica: [ { - id: "XXXXXXX", + id: 'XXXXXXX', /** * You can configure all settings provided by metrika here @@ -161,46 +162,46 @@ export default { webvisor: true, trackHash: true, triggerEvent: true, - ecommerce: "dataLayer", - trustedDomains: ["example.com"], + ecommerce: 'dataLayer', + trustedDomains: ['example.com'], type: 0, params: {}, - userParams: {}, - }, - }, + userParams: {} + } + } ], // Microsoft Analytics (only one tag can be set) microsoft: { - id: "XXXXX", + id: 'XXXXX' }, // Hotjar Analytics (only one tag can be set) hotjar: { - id: 1000000, + 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", + 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", + 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", + script: 'analytics.tiktok.com/i18n/pixel/events.js' }, // SimpleAnalytics @@ -210,15 +211,15 @@ export default { * You can overwrite domain name (optional) * @see https://docs.simpleanalytics.com/overwrite-domain-name */ - hostname: "example.com", + 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", + script: 'https://example.com/proxy.js', + noScript: 'https://example.com/simple/noscript.gif' }, - + // Plausible plausible: { enabled: true, // or false @@ -226,18 +227,19 @@ export default { * 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", + hostname: 'example.com', /** * You can configure a proxy (optional) * @see https://plausible.io/docs/proxy/introduction */ - script: "example.com/js/script.js", + script: 'example.com/js/script.js', }, - }), + }) ], -}; +} ``` + ## Resources - https://developers.google.com/analytics/devguides/collection/ga4