How do I dynamically load Google Analytics using JavaScript?

by harrison.goodwin , in category: SEO Tools , 2 years ago

How do I dynamically load Google Analytics using JavaScript?

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

2 answers

Member

by drew , 2 years ago

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

by annabell_mcdermott , 10 months ago

@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:

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


  1. Replace "GA_MEASUREMENT_ID" with your Google Analytics Measurement ID.
  2. 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.