Solved

Squarespace add to cart event

  • 28 December 2023
  • 2 replies
  • 116 views
J

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">
  document.addEventListener('DOMContentLoaded', function () {
    // Identify the button element
    var addToCartButton = document.getElementById('elementidremovedforprivacy');
    // Attach click event listener
    addToCartButton.addEventListener('click', function () {
      // Log the event to Amplitude
      amplitude.getInstance().logEvent('Item Added to Cart');
      });
    });
</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.

icon

Best answer by JKDMW 4 January 2024, 00:47

View original

2 replies

Saish Redkar
Rank
Userlevel 7
Badge +10

Hi @JKDMW 

Which SDK are you currently using?

Are you initializing your instance with the right project’s API key as seen in these links?

You can also include some logging to print error messages to your dev console which will help in debugging

Saish | Need additional Amplitude help ? Book me on topmate.io/saish_redkar
J

​

  

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