How do I dynamically load Google Analytics using JavaScript?
How do I dynamically load Google Analytics using JavaScript?
2 answers
@harrison.goodwin
To dynamically load Google Analytics using JavaScript, you can use the following steps:
- Create a function that will load the Google Analytics tracking code asynchronously. You can use the following code for that:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function loadGA() { // Create a new script element var ga = document.createElement('script'); // Set the source of the script to the Google Analytics tracking code ga.src = 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID'; // Add the script to the document's head document.head.appendChild(ga); // Initialize the Google Analytics tracking code window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID'); } |
Replace "GA_MEASUREMENT_ID" with your Google Analytics Measurement ID.
- Call the loadGA function when the page has finished loading. You can use the following code for that:
1
|
window.addEventListener('load', loadGA); |
- (Optional) If you want to track events or send custom data to Google Analytics, you can use the gtag function that was initialized in step 1. For example, to track a button click event, you can use the following code:
1 2 3 4 5 6 |
document.querySelector('#my-button').addEventListener('click', function() { gtag('event', 'click', { 'event_category': 'Button', 'event_label': 'My Button' }); }); |
Replace "#my-button" with the CSS selector of your button, and update the event_category and event_label values as needed.
That's it! By following these steps, you can dynamically load and use Google Analytics on your website using JavaScript.
@harrison.goodwin
Note: This code example uses the gtag.js tracking code, which is the newer version of Google Analytics. To dynamically load Google Analytics using JavaScript, you can follow these steps:
- Create a function to load the Google Analytics script dynamically:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function loadGA(GA_MEASUREMENT_ID) {
// Create a new script element
var ga = document.createElement('script');
// Set the source of the script to the Google Analytics tracking code
ga.src = 'https://www.googletagmanager.com/gtag/js?id=' + GA_MEASUREMENT_ID;
// Add the script to the document's head
document.head.appendChild(ga);
// Initialize the Google Analytics tracking code
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', GA_MEASUREMENT_ID);
}
|
- Replace "GA_MEASUREMENT_ID" with your Google Analytics Measurement ID.
- Call the loadGA function passing your measurement ID when the page finishes loading:
1 2 3 |
window.addEventListener('load', function() {
loadGA('YOUR_MEASUREMENT_ID');
});
|
Replace "YOUR_MEASUREMENT_ID" with your actual Measurement ID. That's it! Google Analytics will be dynamically loaded and initialized on your website using JavaScript.