<- Documentation

Last edited on Nov 10, 2022

How to track button clicks for analytics

This guide allows you to track button clicks with third-party analytics like Google Analytics, Meta Pixel, Plausible, etc.

Step 1: Create a button with a link

This is the button that you want to track. It needs to have a link as we're going to use that link to identify that this button has been clicked.

Add a button with a link

Let's say that your link is https://domain.com/signup

Step 2: Copy the code from your analytics provider

For example, in my provider I'm seeing the instruction to add this call code on button click. This will be different for you!

Code from analytics provider, this depends on your provider

Step 3: Add event handler code in Code Injection

Go to Settings > Code Injection > Site Body

<script>  window.onload = () => {    // 1️⃣ Make sure the value of BUTTON_LINK is your link    const BUTTON_LINK = "https://domain.com/signup";    Array.from(      document.querySelectorAll(`[href='${BUTTON_LINK}']`)    ).forEach((e) => {            // listen to clicks for all buttons with this link      e.addEventListener('click', function() {              // 2️⃣ Insert the code from your analytics provider here        // --- replace from here ---        gtag('event', 'screen_view', {          'app_name': 'myAppName',          'screen_name': 'Home'        });        // --- to here ---      })    });  };</script>

Code to add to the Code Injection section on your Typedream site

You need to change 1️⃣ and 2️⃣:

Here's what it looks like:

Example of how it looks like after you added the Code Injection

That's it! 🎉

Your link should now be able to see the button click events in your analytics provider.

Made in Typedream