Google Tag Manager FOSS alternative?

bird@beehaw.org to Free and Open Source Software@beehaw.org – 2 points –

Is anyone aware of FOSS alternatives to Google Tag Manager?

I have a really simple use case where I'm trying to find a solution that can trigger tags based on:

  • click class
  • click ID
  • click text

My tags simply fire javascript events to Plausible Analytics for tracking a few different web conversion scenarios.

In the past, I've tried Scale8 (it seems to have folded). I'm aware of Matomo's tag manager, but I already have an analytics solution, so I'm not really interested in deploying their analytics platform just for the tag manager plugin.

I recently came across RudderStack, but it doesn't seem to meet my simple needs. Or, if it does, its learning curve seems high.

3

You are viewing a single comment
View all comments

If you’re still looking for a solution, have you thought about using a native JavaScript solution?

It could be as simple as placing a click listener on the body element of each page and then having a list of CSS selector rules. Matches is a JS function that you can pass a CSS selector too, so each click that occurs you can loop through an array of selectors.

Alternatively, that array of selectors could be the elements you attach the listeners to directly.

I’d be happy to help create some examples, if you have any extra context 👍

That would be so amazing! I'd love to just accomplish this without any third-party dependency.

I have the ability to fire javascript on specific pages on my site, so this sounds like it may work!

For the benefit of the wider internet, I'll include the details of my triggers and tags here, but I'm going to DM you and send you the same details. Not sure how inter-instance DMing will work on Lemmy, so this is a fallback.

This is how I have the tags and triggers configured in GTM currently:

#1 Trigger: click class = single_add_to_cart_button button alt

Tag: <script> plausible('Affiliate Click', {props: {product: document.title}}); </script>

#2 Trigger: Click Text matches RegEx (ignore case) view on etsy|view on amazon|view on society6

Tag: <<script> plausible('Affiliate Click', {props: {product: document.title}}); </script>

Hey @bird@beehaw.org, I'll keep this on the post for now as its generic content at the moment.

There are two ways I'm going to suggest:

#1 Plausible's library

You mentioned using Plausible. did you know that if you include their custom event JS library you can just add class names to existing elements? If you're able to adjust the class names on your site this would be a nice and simple way to do things.

For example:

<button class="single_add_to_cart_button button alt plausible-event-name--Affiliate+Click plausible-event--product=product+name">Buy me</button>

For it to work you need to update your Plausible library to https://your-domain.com/js/script.tagged-events.js

The main issue here is that you have dynamic content being fed back to Plausible at the same time, which this process wouldn't help with unless you can tell you CMS to drop the name of a page's product into the class list. The example above shows what this would look like.

#2 - Custom JavaScript

The other route is just adding in custom JS. We could create a fun little library to add lots of customisation in, but we can keep this quite simple, by pasting the following code at the bottom of a page's body element.

(function(){
  var target_elements = document.querySelectorAll(".single_add_to_cart_button");
  for (var i=0; i<target_elements.length; i++) {
    target_elements[i].addEventListener("click", function(){ plausible("Affiliate Click", { props: {product: document.title} }); })
  }
})();

This code will:

  • Look for all elements on the page that own a class name of "single_add_to_cart_button" (they can have other class names too)
  • Look through all found, if any, and attach a click listener to those elements
  • When a user clicks, the "plausible" function will be called and the desired parameters passed to it

If you want to know more about CSS selectors, W3Schools offers some simple examples to learn from.

You'll notice that this just covers the first of the two examples you gave. For your second example it would be good to have some additional information so that we can refine the click listener. For example, are each of these "link" or "button" elements, such as:

<a href="http://other-domain.com">View on Etsy</a>

If you're happy to DM me an example URL on this site, I can give you a complete example for the second set of click listeners?