How do I dynamically load Google Analytics using JavaScript?

@harrison.goodwin 

To dynamically load Google Analytics using JavaScript, you can use the following steps:

1. 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.

1. Call the loadGA function when the page has finished loading. You can use the following code for that:

1

window.addEventListener('load', loadGA);

1. (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.