Support home / Script Settings

Google Tag Manager

We don’t recommend using GTM because it still allows Google to have a presence on your website. Google Tag Manager, along with Google Analytics, are also illegal. But if you have no choice in the matter, here’s how to add Fathom through GTM.

GTM doesn’t allow you to add regular inline <script> tags, so you can’t just paste the standard Fathom embed code. Instead, you need to use a Custom HTML tag that programmatically creates and injects the Fathom script into the page. Add the following as a Custom HTML tag in GTM, replacing YOUR-SITE-ID with your actual site ID:

<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>

This creates a new <script> element, sets your site ID and the Fathom CDN source on it, then appends it to the <head> of your page — effectively loading Fathom the same way the standard embed code would.

Note that your site firewall settings will still work when you add Fathom through GTM.

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>