Squarespace add to cart event

JKDMW

Hi there,

I’m new to amplitude and don’t really know much code. I’m trying to instrument an event for when a specific item on a squarespace shop page is added to cart.

First, I got the elementID by using the inspect function on the web page, and then I am using this code via the squarespace header code injection tool to try and send the data to amplitude:

 

<script type="text/javascript"><br />  document.addEventListener('DOMContentLoaded', function () {<br />    // Identify the button element<br />    var addToCartButton = document.getElementById('elementidremovedforprivacy');<br />    // Attach click event listener<br />    addToCartButton.addEventListener('click', function () {<br />      // Log the event to Amplitude<br />      amplitude.getInstance().logEvent('Item Added to Cart');<br />      });<br />    });<br /></script>

 

But I’m not seeing any of the events pushed to my amplitude data stream. Do I need to set something up in Amplitude to listen for the event, or is there something wrong with my code? I had ChatGPT proof it and it said there were no errors, but still nothing. Any help would be appreciated.

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!

​