usegtag

Connect your React app to Google Analytics 4 and/or Universal Analytics with a simple hook

Usage no npm install needed!

<script type="module">
  import usegtag from 'https://cdn.skypack.dev/usegtag';
</script>

README

useGtag

Connect your React app to Google Analytics 4 and/or Universal Analytics with a simple hook

usegtag - v1.4.0

usegtag - v1.4.0

Table of contents

References

Functions

References

default

Renames and exports: useGtag

Functions

Gtag

Gtag(__namedParameters: { children?: ReactNode ; sendPageView?: boolean ; trackingId: string ; transportUrl?: string }): Element

React component for setting the tracking ID and triggering the GA (gtag.js) initialization. Can be anywhere in the tree

Parameters:

Name Type Description
__namedParameters object -
__namedParameters.children? ReactNode Children of the component (if any). Note that this component works where-ever you put it in the node tree
__namedParameters.sendPageView? boolean Whether to send initial page view on load (default: true)
__namedParameters.trackingId string Google Analytics ID: G-XXXXXX or UA-XXXXXX
__namedParameters.transportUrl? string URL to send events to, if you are running a custom server setup. (Defaults to the googla analytics server)

Returns: Element

React <Gtag /> component

Defined in: index.tsx:16


install

install(trackingId?: string, params?: { send_page_view?: boolean ; transport_url?: string } & Gtag.CustomParams): void

Install the GA tracking code (gtag.js) on your page. (Imperative alternative to using the GA4 component)

Parameters:

Name Type Description
trackingId? string Code for identifying the data stream/property in Google Analytics (G-XXXXXX or UA-XXXXXXX)
params { send_page_view?: boolean ; transport_url?: string } & Gtag.CustomParams -

Returns: void

Defined in: index.tsx:45


setTrackingId

setTrackingId(trackingId: string): void

Initialize the tracking code for later use by install or useGtag. Facilitates easy initializastion and lazy loading

Parameters:

Name Type
trackingId string

Returns: void

Defined in: index.tsx:97


useGtag

useGtag(trackingId?: string): object

Fetch the gtag function, and install it if not already set up.

Parameters:

Name Type
trackingId? string

Returns: object

Name Type
builtInEvent (action: Gtag.EventNames, params?: Gtag.EventParams) => void
customEvent (action: string, params?: { [key: string]: string | number | boolean; }) => void
gtag Gtag
pageview (path?: string | Location, location?: string | Location, title?: string) => any

New gtag function, runs when gtag is loaded if not ready, will die silently if in error situation

Defined in: index.tsx:105


useGtagBuiltInEvent

useGtagBuiltInEvent(action: Gtag.EventNames, params: Gtag.EventParams, deps?: any[]): void

Parameters:

Name Type
action Gtag.EventNames
params Gtag.EventParams
deps? any[]

Returns: void

Defined in: index.tsx:170


useGtagCustomEvent

useGtagCustomEvent(action: string, params: { [key: string]: string | boolean | number; }, deps?: any[]): void

Parameters:

Name Type
action string
params object
deps? any[]

Returns: void

Defined in: index.tsx:180


usePageview

usePageview(pathname?: string, deps?: any[], trackingId?: string): void

Parameters:

Name Type
pathname? string
deps? any[]
trackingId? string

Returns: void

Defined in: index.tsx:190