Track ecommerce conversions

With Fathom Analytics, you can send a value with each event completion. That value is in cents, so $1.23 would be 123.

Set a default currency for the site from the Events box on your dashboard (click the currency icon next to expand and search, then use Default currency for this site at the top of the modal). New events use that default until you pick a currency for them under Individual event currencies. A pattern such as Purchase: * sets one currency for every matching name, including leftover events on that site. Choose None on an event if you want it to stay unvalued even when the site default is a real currency. The site default is None until you change it.

To send an event with a value (in this case, a $10 widget), here’s the code:

<script>
window.addEventListener('load', (event) => {
  fathom.trackEvent('widget purchase', {
    _value: 1000, // Value is in cents
  });
});
</script>

And you’d replace widget purchase with an Event name of your choosing. And you’d replace 1000 (which is $10.00) with the value of the event completion.

Say you have e-commerce shopify that has variables for things like product names and product pricing. In that scenario, you can send dynamic values for your event name and values to Fathom Analytics. Here’s an example of code for Shopify (but it can be adapted to any e-commerce software):

<script>
// Set the PRODUCT_NAME and dynamicValue variables using Shopify's Liquid code
{% if product.title %}
  window.PRODUCT_NAME = {{ product.title | escape }};
  window.dynamicValue = {{ product.price | divided_by: 100 }}; // Example: Convert price to a numeric value
{% else %}
  window.PRODUCT_NAME = 'Default Product Name'; // Provide a default name
  window.dynamicValue = 0; // Provide a default value
{% endif %}
</script>

<script>
window.addEventListener('load', (event) => {
  const addToCartButtons = document.querySelectorAll('.add-to-cart-button'); // Replace with your actual selector
  addToCartButtons.forEach(button => {
    button.addEventListener('click', (clickEvent) => {
      const dynamicProductName = window.PRODUCT_NAME;
      const eventName = `added to cart: ${dynamicProductName}`;

      // Calculate the dynamic value based on your logic
      const dynamicValue = window.dynamicValue;

      // Track the event with the dynamic product name and value
      fathom.trackEvent(eventName, {
        _value: dynamicValue,
      });
    });
  });
});
</script>

The gist of the above code is to show you that you can dynamically create event names from variables within your site’s software and send them to Fathom with dynamic values as well.