Uncaught TypeError: amplitude.getInstance is not a function

JKDMW

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

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

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"><br />  amplitude.init('YOUR_API_KEY_HERE');<br />  document.addEventListener('DOMContentLoaded', function () {<br />    // Check if Amplitude library is ready<br />    if (typeof amplitude !== 'undefined') {<br />      // Select the h1 element with the class 'pdp-details-title'<br />      var productTitleElement = document.querySelector('.pdp-details-title');<br /><br /> {<br />        // Select all elements with the class 'sqs-add-to-cart-button'<br />        var addToCartButtons = document.querySelectorAll('.sqs-add-to-cart-button');<br /><br />        // Attach click event listener to each button<br />        addToCartButtons.forEach(function(button) {<br />          button.addEventListener('click', function () {<br />            // Get the product name from the h1 element<br />            var productName = productTitleElement ? productTitleElement.textContent.trim() : '';<br /><br />            // Log the event to Amplitude with various properties<br />            amplitude.logEvent('Item added to cart', { <br />              buttonId: button.id,<br />              pageUrl: window.location.href,<br />              productName: productName,<br />              // Add other properties as needed<br />            });<br />          });<br />        });<br />      } else {<br />        console.error('Dropdown menus for color or nib not found.');<br />      }<br />    } else {<br />      console.error('Amplitude library is not loaded.');<br />    }<br />  });<br /></script><br />

(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!