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-autolink
Usage
Step 1. Pull in the JS bundle into your local front-end build.
- Via Bolt's
.boltrc.js
config:
module.exports = {
components: {
global: [
'@bolt/analytics-autolink',
]
}
}
- Or for existing build processes (ex. Webpack), simply import the main JS bundle:
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>
const TRACKING_ID = 'UA-123456789-0';
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');
</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'],
};
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'],
},
};
ga('linker:autoLink', window.drupalSettings.google_analytics.trackCrossDomains);
</script>