-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(tpc): support customizing dataLayer variable
- Loading branch information
1 parent
3c8e6c4
commit 09e3c2f
Showing
6 changed files
with
100 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,32 +1,39 @@ | ||
// WARNING: This file is automatically generated, do not manually modify. | ||
import { withQuery } from 'ufo' | ||
import type { GoogleAnalyticsApi } from 'third-party-capital' | ||
import { defu } from 'defu' | ||
import type { DataLayer, GTag } from 'third-party-capital' | ||
import { useRegistryScript } from '#nuxt-scripts-utils' | ||
import type { RegistryScriptInput } from '#nuxt-scripts' | ||
import { object, string, optional } from '#nuxt-scripts-validator' | ||
|
||
export const GoogleAnalyticsOptions = object({ id: string(), dataLayerName: optional(string()) }) | ||
export const GoogleAnalyticsOptions = object({ | ||
id: string(), | ||
l: optional(string()), | ||
}) | ||
export type GoogleAnalyticsInput = RegistryScriptInput<typeof GoogleAnalyticsOptions> | ||
|
||
declare global { | ||
interface Window extends GoogleAnalyticsApi {} | ||
function use(options: GoogleAnalyticsInput) { | ||
const gtag: GTag = function (...args: Parameters<GTag>) { | ||
((window as any)[options.l ?? 'dataLayer'] as DataLayer).push(args) | ||
} as GTag | ||
return { dataLayer: (window as any)[options.l ?? 'dataLayer'] as DataLayer, | ||
gtag } | ||
} | ||
export type GoogleAnalyticsInput = RegistryScriptInput<typeof GoogleAnalyticsOptions> | ||
|
||
export function useScriptGoogleAnalytics<T extends GoogleAnalyticsApi>(_options?: GoogleAnalyticsInput) { | ||
_options = defu(_options, { dataLayerName: 'defaultGa' }) | ||
return useRegistryScript<T, typeof GoogleAnalyticsOptions>(_options?.key || 'googleAnalytics', options => ({ | ||
export function useScriptGoogleAnalytics(_options?: GoogleAnalyticsInput) { | ||
return useRegistryScript<ReturnType<typeof use>, typeof GoogleAnalyticsOptions>(_options?.key || 'googleAnalytics', options => ({ | ||
scriptInput: { | ||
src: withQuery('https://www.googletagmanager.com/gtag/js', { id: options?.id }), | ||
src: withQuery('https://www.googletagmanager.com/gtag/js', { id: options?.id, l: options?.l }), | ||
}, | ||
schema: import.meta.dev ? GoogleAnalyticsOptions : undefined, | ||
scriptOptions: { | ||
use: () => { return { dataLayer: window.dataLayers[options.dataLayerName!], gtag: window.gtag } }, | ||
use: () => use(options), | ||
stub: import.meta.client ? undefined : ({ fn }) => { return fn === 'dataLayer' ? [] : void 0 }, | ||
performanceMarkFeature: 'nuxt-third-parties-ga', | ||
...({ tagPriority: 1 }), | ||
}, | ||
// eslint-disable-next-line | ||
clientInit: import.meta.server ? undefined : () => {window.dataLayers=window.dataLayers||{};window.dataLayers[options.dataLayerName!]=window.dataLayers[options.dataLayerName!]||[];window.gtag=function gtag(){window.dataLayer.push(arguments);};window.gtag('js',new Date());window.gtag('config',options.id!)}, | ||
// @ts-ignore | ||
// eslint-disable-next-line | ||
clientInit: import.meta.server ? undefined : () => {window[options?.l ?? "dataLayer"]=window[options?.l ?? "dataLayer"]||[];window[options?.l ?? "dataLayer"].push({'js':new Date()});window[options?.l ?? "dataLayer"].push({'config':options?.id })}, | ||
}), _options) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,32 +1,38 @@ | ||
// WARNING: This file is automatically generated, do not manually modify. | ||
import { withQuery } from 'ufo' | ||
import type { GoogleTagManagerApi } from 'third-party-capital' | ||
import { defu } from 'defu' | ||
import type { GoogleTagManagerApi, DataLayer } from 'third-party-capital' | ||
import { useRegistryScript } from '#nuxt-scripts-utils' | ||
import type { RegistryScriptInput } from '#nuxt-scripts' | ||
import { object, string, optional } from '#nuxt-scripts-validator' | ||
|
||
export const GoogleTagManagerOptions = object({ id: string(), dataLayerName: optional(string()) }) | ||
|
||
declare global { | ||
interface Window extends GoogleTagManagerApi {} | ||
} | ||
export const GoogleTagManagerOptions = object({ | ||
id: string(), | ||
l: optional(string()), | ||
}) | ||
export type GoogleTagManagerInput = RegistryScriptInput<typeof GoogleTagManagerOptions> | ||
|
||
export function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(_options?: GoogleTagManagerInput) { | ||
_options = defu(_options, { dataLayerName: 'defaultGtm' }) | ||
return useRegistryScript<T, typeof GoogleTagManagerOptions>(_options?.key || 'googleTagManager', options => ({ | ||
function use(options: GoogleTagManagerInput) { | ||
return { dataLayer: (window as any)[options.l ?? 'dataLayer'] as DataLayer, google_tag_manager: window.google_tag_manager } | ||
} | ||
|
||
export function useScriptGoogleTagManager(_options?: GoogleTagManagerInput) { | ||
return useRegistryScript<ReturnType<typeof use>, typeof GoogleTagManagerOptions>(_options?.key || 'googleTagManager', options => ({ | ||
scriptInput: { | ||
src: withQuery('https://www.googletagmanager.com/gtm.js', { id: options?.id }), | ||
src: withQuery('https://www.googletagmanager.com/gtm.js', { id: options?.id, l: options?.l }), | ||
}, | ||
schema: import.meta.dev ? GoogleTagManagerOptions : undefined, | ||
scriptOptions: { | ||
use: () => { return { dataLayer: window.dataLayers[options.dataLayerName!], google_tag_manager: window.google_tag_manager } }, | ||
use: () => use(options), | ||
stub: import.meta.client ? undefined : ({ fn }) => { return fn === 'dataLayer' ? [] : void 0 }, | ||
performanceMarkFeature: 'nuxt-third-parties-gtm', | ||
...({ tagPriority: 1 }), | ||
}, | ||
// eslint-disable-next-line | ||
clientInit: import.meta.server ? undefined : () => {window.dataLayers=window.dataLayers||{};window.dataLayers[options.dataLayerName!]=window.dataLayers[options.dataLayerName!]||[];window.dataLayers[options.dataLayerName!].push({'gtm.start':new Date().getTime(),event:'gtm.js'});}, | ||
// @ts-ignore | ||
// eslint-disable-next-line | ||
clientInit: import.meta.server ? undefined : () => {window[options?.l ?? "dataLayer"]=window[options?.l ?? "dataLayer"]||[];window[options?.l ?? "dataLayer"].push({'gtm.start':new Date().getTime(),event:'gtm.js'});}, | ||
}), _options) | ||
} |