Skip to main content

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?

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


Terms & ConditionsCookie settings