@analytics/google-analytics
Advanced tools
Readme
This analytics plugin will load google analytics v.4 into your application.
For more information see the docs.
npm install analytics
npm install @analytics/google-analytics
The @analytics/google-analytics package works in the browser. To use, install the package, include in your project and initialize the plugin with analytics.
Below is an example of how to use the browser plugin.
import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleAnalytics({
measurementIds: ['G-abc123']
})
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})
After initializing analytics with the googleAnalytics plugin, data will be sent into Google Analytics whenever analytics.identify, analytics.page, or analytics.track are called.
See additional implementation examples for more details on using in your project.
The @analytics/google-analytics package works in the browser
The Google Analytics client side browser plugin works with these analytic api methods:
import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleAnalytics({
measurementIds: ['G-abc123']
})
]
})
| Option | description |
|---|---|
measurementIds required - Array. | Google Analytics MEASUREMENT IDs |
debug optional - boolean | Enable Google Analytics debug mode |
dataLayerName optional - string | The optional name for dataLayer object. Defaults to ga4DataLayer. |
gtagName optional - string | The optional name for dataLayer object. Defaults to gtag. |
gtagConfig.anonymize_ip optional - boolean | Enable Anonymizing IP addresses sent to Google Analytics. |
gtagConfig.cookie_domain optional - object | Additional cookie properties for configuring the ga cookie |
gtagConfig.cookie_expires optional - object | Additional cookie properties for configuring the ga cookie |
gtagConfig.cookie_prefix optional - object | Additional cookie properties for configuring the ga cookie |
gtagConfig.cookie_update optional - object | Additional cookie properties for configuring the ga cookie |
gtagConfig.cookie_flags optional - object | Additional cookie properties for configuring the ga cookie |
customScriptSrc optional - string | Custom URL for google analytics script, if proxying calls |
Below are additional implementation examples.
Below is an example of importing via the unpkg CDN. Please note this will pull in the latest version of the package.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/google-analytics in HTML</title>
<script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
<script src="https://unpkg.com/@analytics/google-analytics/dist/@analytics/google-analytics.min.js"></script>
<script type="text/javascript">
/* Initialize analytics */
var Analytics = _analytics.init({
app: 'my-app-name',
plugins: [
analyticsGa.init({
measurementIds: ['G-abc123']
})
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})
</script>
</head>
<body>
....
</body>
</html>
Using @analytics/google-analytics in ESM modules.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/google-analytics in HTML via ESModules</title>
<script>
// Polyfill process.
// **Note**: Because `import`s are hoisted, we need a separate, prior <script> block.
window.process = window.process || { env: { NODE_ENV: 'production' } }
</script>
<script type="module">
import analytics from 'https://unpkg.com/analytics/lib/analytics.browser.es.js?module'
import analyticsGa from 'https://unpkg.com/@analytics/google-analytics/lib/analytics-plugin-ga.browser.es.js?module'
/* Initialize analytics */
const Analytics = analytics({
app: 'analytics-html-demo',
debug: true,
plugins: [
analyticsGa({
measurementIds: ['G-abc123']
})
// ... add any other third party analytics plugins
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})
</script>
</head>
<body>
....
</body>
</html>
Google analytics 4 sometimes automatically sends a page view for single page applications. To disable this you will need to go into the settings of your stream and click into "enhanced measurement" section and uncheck the "Page changes based on browser history events" setting. This will make sure only analytics.page() calls will send page views to Google analytics v4.
For the older version of google analytics please see the @analytics/google-analytics-v3 package or the GA3 plugin docs
It is possible to use both GA3 and GA4 together shown below. Just remember GA3 will be deprecated starting in July of 2023
import Analytics from 'analytics'
import googleAnalyticsPlugin from '@analytics/google-analytics'
import googleAnalyticsV3Plugin from '@analytics/google-analytics-v3'
/* Initialize analytics instance */
const analytics = Analytics({
app: 'my-app',
plugins: [
/* Load Google Analytics v4 */
googleAnalyticsPlugin({
measurementIds: ['G-abc123'],
}),
/* Load Google Analytics v3 */
googleAnalyticsV3Plugin({
trackingId: 'UA-11111111-2',
}),
],
})
analytics.page()
FAQs
Google analytics v4 plugin for 'analytics' module
The npm package @analytics/google-analytics receives a total of 33,026 weekly downloads. As such, @analytics/google-analytics popularity was classified as popular.
We found that @analytics/google-analytics demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.