AvantLink AvantMetrics to Squarespace

Do you want to use AvantLink and send the Squarespace E-commerce information to AvantLink & AvantMetrics? I just implemented this for a client and basically wanna tell you I know how to do it. Share a few thoughts. And let you know, if you need it, I can implement it

AvantLink AvantMetrics to Squarespace - requirements

To send our data correctly, we need 3 parts:

1) Order Array

• Sends order data to AvantLink.

2) Item Array:  

• Sends product item details to AvantLink.  

• There should be one Item Array for each product purchased on the order.  

• The SKU’s passed in the Item Array should match what is used in your product datafeed.

3) Sitewide Tracking script

Script Placement

• Use this template to build the Sitewide Tracking Script.

• Insert the Sitewide Tracking script immediately before the closing BODY tag of every page on your website.

AvantLink AvantMetrics to Squarespace - the problem

Adding AvantLink AvantMetrics to Squarespace is hard. The problem is most of all the limited capabilities of Squarespace.

For being bable to add AvantLink AvantMetrics to Squarespace, we’d need things like product SKU, product price, country, state, tax, shipping price, product quantity etc. As in the screenshot above Squarespace doesn’t provide other variables than

• {orderId}: The order number of the confirmed order

• {orderSubtotal}: The subtotal of the confirmed order

• {orderSubtotalCents}: The subtotal of the confirmed order, in cents

• {orderGrandTotal}: The grand total of the confirmed order

• {orderGrandTotalCents}: The grand total of the confirmed order, in cents

• {customerEmailAddress}:The customer's email address, as it was entered in the "Billing Info" section

So, how can we get the SKU, tax, country, state, product quantities, shipping price etc we need for AvantLink AvantMetrics?

The solution for AvantLink AvantMetrics in Squarespace

The solution lies in the order status page HTML. There is a “secret” javascript tag with all the information we need inside tag:

<script type="application/json" id="bootstrap-data">

So, the short answer is, you need to use javascript to parse the contents of the <script type="application/json" id="bootstrap-data">, and then use that data to populate our AvantLink AvantMetrics arrays to send Squarespace e-commerce data to AvantLink.

The AvantLink documentation can be found here.

Using this script tag content, for example with a code like this

<script>
  // Helper function for safely parsing JSON
  function safeJSONParse(str) {
    try {
      return JSON.parse(str);
    } catch (e) {
      return null;
    }
  }

  // Retrieve the script element that contains e-commerce data
  const scriptElement = document.getElementById('bootstrap-data');

  // Safely parse the e-commerce data, if available
  if (scriptElement) {
    ecommerceData = safeJSONParse(scriptElement.innerHTML); // Made it global by attaching to window object
    console.log("ecommerce data:", window.ecommerceData);
  } else {
    console.log("no ecommerce data");
  }
</script>

…you will be able to get all the information AvantLink AvantMetrics requires, from Squarespace.

The __AvantMetrics array should look something like this, in your browser console:

Also remember the sitewide tracking code, added to the Squarespace footer code injection in the bottom:

<script type="text/javascript">
(function() {var avm = document.createElement('script'); avm.type = 'text/javascript'; avm.async = true;
avm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.avmws.com/1012345/';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(avm, s);})();

Need help with AvantLink AvantMetrics? Hire me to code it 🙋‍♂️

This tutorial is pretty short, quite technical. It only illustrates the general idea, the base of our solution. The actual implementation is a bit more complex. If you’d like help, I can set up AvantLink AvantMetrics to your Squarespace checkout. hire