How do I dynamically load Google Analytics using JavaScript?

 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');
}

1

window.addEventListener('load', loadGA);

1
2
3
4
5
6

document.querySelector('#my-button').addEventListener('click', function() {
  gtag('event', 'click', {
    'event_category': 'Button',
    'event_label': 'My Button'
  });
});

 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);
}

1
2
3

window.addEventListener('load', function() {
  loadGA('YOUR_MEASUREMENT_ID');
});