Skip to main content
Solved

Uncaught TypeError: amplitude.getInstance is not a function

  • December 31, 2023
  • 2 replies
  • 1064 views

So I’m not really sure what to do about this error.

I’m trying to instrument add to cart button click events to amplitude with this code:

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function () {
    // Select all elements with the class 'sqs-add-to-cart-button'
    var addToCartButtons = document.querySelectorAll('.sqs-add-to-cart-button');
    // Attach click event listener to each button
    addToCartButtons.forEach(function(button) {
      button.addEventListener('click', function () {
        // Check if Amplitude is available and initialized
        var amplitudeInstance = amplitude.getInstance();
        if (amplitudeInstance) {
          // Log the event to Amplitude
          amplitudeInstance.logEvent('item_added_to_cart', { buttonId: button.id });
        } else {
          console.error('Amplitude not available or initialized.');
        }
      });
    });
  });
</script>

But it produces the problem that amplitude.getinstance is not a function. Could anyone give me some guidance?

Best answer by JKDMW

Hi Saish, I was eventually able to get around the problem (and the other one you responded to) by injecting the code into the footer of the site and starting the script with amplitude.init instead of getting the instance, since I already knew what the instance was going to be.

 

If other have issues instrumenting an ‘add to cart’ tracker on their squarespace sites, here is some code that worked for me:

 

<script type="text/javascript">
  amplitude.init('YOUR_API_KEY_HERE');
  document.addEventListener('DOMContentLoaded', function () {
    // Check if Amplitude library is ready
    if (typeof amplitude !== 'undefined') {
      // Select the h1 element with the class 'pdp-details-title'
      var productTitleElement = document.querySelector('.pdp-details-title');

 {
        // Select all elements with the class 'sqs-add-to-cart-button'
        var addToCartButtons = document.querySelectorAll('.sqs-add-to-cart-button');

        // Attach click event listener to each button
        addToCartButtons.forEach(function(button) {
          button.addEventListener('click', function () {
            // Get the product name from the h1 element
            var productName = productTitleElement ? productTitleElement.textContent.trim() : '';

            // Log the event to Amplitude with various properties
            amplitude.logEvent('Item added to cart', { 
              buttonId: button.id,
              pageUrl: window.location.href,
              productName: productName,
              // Add other properties as needed
            });
          });
        });
      } else {
        console.error('Dropdown menus for color or nib not found.');
      }
    } else {
      console.error('Amplitude library is not loaded.');
    }
  });
</script>

(some information removed for privacy)

The above code should send data to your amplitude stream of each ‘add to cart’ event on your Squarespace shop page, with the additional info of the product name pulled from the page that you can filter by in your analyses on Amplitude.

Hopefully it saves somebody some time one day!

View original
Did this topic help you find an answer to your question?

Saish Redkar
Expert
Forum|alt.badge.img+10

Hi @JKDMW 

Which SDK are you using?

The legacy getInstance() function seem to have been removed

https://www.docs.developers.amplitude.com/data/sdks/typescript-browser/migration/#initialization

From what I understand from the doc, you’ll have to change the way of initialization.


  • New Member
  • January 3, 2024

Hi Saish, I was eventually able to get around the problem (and the other one you responded to) by injecting the code into the footer of the site and starting the script with amplitude.init instead of getting the instance, since I already knew what the instance was going to be.

 

If other have issues instrumenting an ‘add to cart’ tracker on their squarespace sites, here is some code that worked for me:

 

<script type="text/javascript">
  amplitude.init('YOUR_API_KEY_HERE');
  document.addEventListener('DOMContentLoaded', function () {
    // Check if Amplitude library is ready
    if (typeof amplitude !== 'undefined') {
      // Select the h1 element with the class 'pdp-details-title'
      var productTitleElement = document.querySelector('.pdp-details-title');

 {
        // Select all elements with the class 'sqs-add-to-cart-button'
        var addToCartButtons = document.querySelectorAll('.sqs-add-to-cart-button');

        // Attach click event listener to each button
        addToCartButtons.forEach(function(button) {
          button.addEventListener('click', function () {
            // Get the product name from the h1 element
            var productName = productTitleElement ? productTitleElement.textContent.trim() : '';

            // Log the event to Amplitude with various properties
            amplitude.logEvent('Item added to cart', { 
              buttonId: button.id,
              pageUrl: window.location.href,
              productName: productName,
              // Add other properties as needed
            });
          });
        });
      } else {
        console.error('Dropdown menus for color or nib not found.');
      }
    } else {
      console.error('Amplitude library is not loaded.');
    }
  });
</script>

(some information removed for privacy)

The above code should send data to your amplitude stream of each ‘add to cart’ event on your Squarespace shop page, with the additional info of the product name pulled from the page that you can filter by in your analyses on Amplitude.

Hopefully it saves somebody some time one day!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings