Track ecommerce conversions - Fathom Analytics Documentation

With Fathom Analytics, you can send a value with each event completion. That value is in cents, so $1.23 would be 123. You can then assign a currency to it from your site settings in Fathom (on the “Events” tab within your site settings). 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.

Support