Solved

Uncaught TypeError: amplitude.getInstance is not a function

  • 31 December 2023
  • 2 replies
  • 235 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?

icon

Best answer by JKDMW 4 January 2024, 00:46

View original

2 replies

Userlevel 7
Badge +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.

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