@bolt/analytics-autolink
v5.0.0
Published
Adds Google Analytics tracking support to the Bolt Design System.
Downloads
6
Readme
Bolt Autolink
Helper library to automatically applies GA autolink click tracking query strings to Bolt components that point to external domains.
Install
npm install @bolt/analytics-autolinkUsage
Step 1. Pull in the JS bundle into your local front-end build.
- Via Bolt's
.boltrc.jsconfig:
module.exports = {
components: {
global: [
'@bolt/analytics-autolink',
//...
]
}
}- Or for existing build processes (ex. Webpack), simply import the main JS bundle:
// ex. main.js
import '@bolt/analytics-autolink';
//2. Config GA + Autolink
For example, a typical GA config might look similar to this:
<head>
<script src="https://www.google-analytics.com/analytics.js" async></script>
<script>
// replace with your own GA tracking #
const TRACKING_ID = 'UA-123456789-0';
// prep GA data if it doesn't yet exist
window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
ga('create', TRACKING_ID, 'auto', { allowLinker: true });
ga('send', 'pageview');
ga('set', 'transport', 'beacon');
ga('require', 'linker');
// See Step 3 below on configuring which domains to track
// window.bolt = window.bolt || {};
// window.bolt.analytics = window.bolt.analytics || {};
// window.bolt.analytics.autolink = window.bolt.analytics.autolink || {
// domains: ['google.com'] // domains to configure
// };
// ga('linker:autoLink', window.bolt.analytics.autolink.domains);
</script>3. Configure which domains to autolink
Option 1. Via a global Bolt config. For example:
<script>
window.bolt = window.bolt || {};
window.bolt.autolink = {
domains: ['google.com'], // domains to track
};
// make sure GA's linker:autoLink points to the domains configured
ga('linker:autoLink', window.bolt.autolink.domains);
</script>Option 2. This can also be configured via a Drupal config. For example:
<script>
window.drupalSettings = {
google_analytics: {
trackCrossDomains: ['pega.com'], // domains to track
},
};
// make sure GA's linker:autoLink points to the domains configured
ga('linker:autoLink', window.drupalSettings.google_analytics.trackCrossDomains);
</script>