Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
gatsby-plugin-google-marketing-platform
Advanced tools
gatsby-plugin-google-marketing-platform
Gatsby plugin to add different components of the Google Marketing Platform: Tag Manager, Analytics, Optimize
Google Marketing Platform for Gatsby
Easily add these GMP products in a cohesive way to your Gatsby site:
- Google Tag Manager
- Google Analytics
- Google Optimize
The installation is based on Google's recommendations and best practices.
What This Does
This provides the ability to configure the Google Marketing Platform base tools, including Google Analytics, Google Optimize, and Google Tag Manager.
This plugin also allows the ability to preset dataLayer variables. This is useful in cases where you need GA, configured within GTM, to fire with particular variables on the initial pageview, such as dynamically setting your Google Analytics Property ID, instead of requiring to maintain it in multiple locations.
What this does NOT do
This will not provide any functionality around specific tracking or conversion tags. These responsibilities should be handled in Google Tag Manager.
Getting Started
Install
yarn add gatsby-plugin-google-marketing-platform
or
npm install gatsby-plugin-google-marketing-platform
Basic Setup
// In your gatsby-config.js
plugins: [
{
resolve: 'gatsby-plugin-google-marketing-platform',
options: {
dataLayer: {
gaPropertyId: '[Google Analytics ID]',
},
tagmanager: {
id: '[Google Tag Manager ID]'
},
analytics: {
id: '[Google Analytics ID]'
}
},
}
]
Configuration
| Key | Type | Default | Description |
|---|---|---|---|
| dataLayer | object | {} | See Below |
| tagmanager | object | {} | See Below |
| analytics | object | {} | See Below |
| optimize | object | {} | See Below |
| includeInDevelopment | boolean | false | Scripts will be bundled in development mode |
Data Layer
The dataLayer key is a freeform object that will allow you to pass data through to the globally available dataLayer array that Google Tag Manager utilizes to store and watch data. There is no set functionality for this, but you can see below for some usage examples.
Examples
| Key | Type | Default |
|---|---|---|
| gaPropertyId | string | None |
Tag Manager
Configuration specifics for Google Tag Manager.
| Key | Type | Default | Description |
|---|---|---|---|
| id | string | None | Google Tag Manager ID |
| params | object | {} | Additional parameters to be added on GTM script URL |
Analytics
Configuration specifics for Google Analytics.
| Key | Type | Default | Description |
|---|---|---|---|
| id | string | None | Google Analytics ID |
| config | object | {} | Custom GA configuration |
Optimize
Configuration specifics for Google Optimize.
| Key | Type | Default | Description |
|---|---|---|---|
| id | string | None | Google Optimize ID |
| timeout | number | 500 | Number of milliseconds Optimize waits to try to load - Docs |
| activateOn | string | None | Activation Method |
Activation Method
By default, this plugin doesn't push any activation events to Google Tag Manager for single page apps. The activateOn property allows configuration to provide different methods of activation.
Activation events refers to Google's way of handling re-activating Optimize on DOM change.
https://support.google.com/optimize/answer/7008840?hl=en
Options
observer: Utilizes MutationObserver to watch for DOM changes
Examples
Google Tag Manager with Google Analytics and Google Optimize
// In your gatsby-config.js
plugins: [
{
resolve: 'gatsby-plugin-google-marketing-platform',
options: {
dataLayer: {
// Preset dataLayer values
gaPropertyId: '[Google Analytics ID]',
},
tagmanager: {
id: '[Google Tag Manager ID]',
params: {
// GTM URL Parameters
// Ex: https://www.googletagmanager.com/gtm.js?id=[ID]>m_cookies_win=x
gtm_cookies_win: 'x'
}
},
analytics: {
id: '[Google Analytics ID]',
},
optimize: {
id: '[Google Optimize ID]',
}
}
}
]
What That Will Add
Note: the below will be minified along with the rest of the code and not include comments
...
<head>
...
<!-- Set up dataLayer with data if provided -->
<script>
window.dataLayer = window.dataLayer || [{"gaPropertyId":"TEST-1234"}];
</script>
<!-- Initialized GTM via gtag -->
<script>
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
</script>
<!-- Google Optimize async hide class -->
<style>.async-hide { opacity: 0 !important }</style>
<!-- Google Optimize async hide script -->
<script>
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',500,{'ASDF-4321':true});
</script>
<!-- Configure GTM given GA and GO IDs -->
<script>
gtag('config', 'TEST-1234', {"optimize_id":"ASDF-4321"});
</script>
<!-- Configure and initialize GTM -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl+'>m_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'TESTASDF-12345678');
</script>
...
</head>
...
<body>
<!-- GTM noscript for when JS isn't available -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=TESTASDF-12345678>m_cookies_win=x" height="0" width="0" style="display: none; visibility: hidden ></iframe></noscript>
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Colby Fayock 💻 📖 |  Richard Taylor Dawson 📖 |  Markus Witzlsperger 💻 |  Matt Smith 📖 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
Gatsby plugin to add different components of the Google Marketing Platform: Tag Manager, Analytics, Optimize
The npm package gatsby-plugin-google-marketing-platform receives a total of 2,819 weekly downloads. As such, gatsby-plugin-google-marketing-platform popularity was classified as popular.
We found that gatsby-plugin-google-marketing-platform demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 30 May 2021
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.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024