Google Tag Manager

We don't recommend using GTM because it still allows Google to have a presence on your website. But if you have no choice in the matter, you can quickly drop Fathom in using the code below (filling in the Site ID with your own, of course). Google Tag Manager, along with Google Analytics, are also illegal.

<script>
    var script = document.createElement('script');
    script.id = 'fathom';
    script.dataset.site = 'YOUR-SITE-ID';
    script.src = "https://cdn.usefathom.com/script.js";
    script.defer = true;
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

Note that your site firewall settings will still work when you add the Fathom code as above in GTM (woohoo!).

Using Events with Google Tag Manager (GTM)

Because of GTM's limitations regarding JavaScript version ES6 and above, the following code snippets (taken from our events documentation) are specifically tailored for compatibility with GTM:

Events for link clicks (targeting by ID):

<script>
    window.addEventListener('load', function(event) {
        document.getElementById('about-us-link').addEventListener('click', function() {
            fathom.trackEvent('about click');
        });
    });
</script>

Events for links or file download button clicks (targeting by class name):

<script>
    window.addEventListener('load', function(event) {
        var elements = document.querySelectorAll('.download-link');
        Array.prototype.forEach.call(elements, function(item) {
            item.addEventListener('click', function(event) {
                fathom.trackEvent('file download');
            });
        });
    });
</script>

Dynamic event names:

<script>
    window.addEventListener('load', function(event) {
        var elements = document.querySelectorAll('.download-link');
        elements.forEach(function(item) {
            item.addEventListener('click', function(event) {
                var fileName = item.getAttribute('href');
                fathom.trackEvent('file download: ' + fileName);
            });
        });
    });
</script>

Events for page loads:

<script>
    window.addEventListener('load', function(event) {
        fathom.trackEvent('checkout completed');
    });
</script>

Events for e-commerce:

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

Dynamic event names and values for Shopify (can be adapted for other platforms):

<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', function(event) {
        var addToCartButtons = document.querySelectorAll('.add-to-cart-button'); // Replace with your actual selector
        addToCartButtons.forEach(function(button) {
            button.addEventListener('click', function(clickEvent) {
                var dynamicProductName = window.PRODUCT_NAME;
                var eventName = 'added to cart: ' + dynamicProductName;
 
                // Calculate the dynamic value based on your logic
                var dynamicValue = window.dynamicValue;
 
                // Track the event with the dynamic product name and value
                fathom.trackEvent(eventName, {
                    _value: dynamicValue
                });
            });
        });
    });
</script>

Events for form submissions:

<script>
    window.addEventListener('load', function(event) {
        document.getElementById('id-of-your-form').addEventListener('submit', function() {
            fathom.trackEvent('form submission');
        });
    });
</script>