Go Back

Custom Events – Business Use Cases

July 12, 2018

Custom Event is a kind of Action, a mini goal that we want our Visitors to convert during their visit. Let’s say that we have some KPI on our page, and we want to track people’s behavior (e.g. clicks on a particular element on the website). All of these can be achieved through the use of Custom Events.

There are multiple things we can employ the Custom Events for:

1. Tracking buttons clicks

This might be the most popular situation where applying Custom Event Tracking can provide us with additional insight into your visitors’ engagement. Please remember that you can measure almost every button activity. For your business goals, the most enriching could be the following: the button changing language, the “show phone number” button, any CTA buttons, pricing buttons, consent tracking buttons, etc.

Let’s assume you want to learn how many people have clicked on the particular buttons in our Help Center. In the best case scenario, your buttons will have a unique ID (and the solutions will work only in this conditions). To find it out you need to right click on it and Inspect and take a look if your buttons have any ID assigned. Thanks to this Custom Event we will be able to check which one of the FAQ buttons was clicked and when.

After checking that we can move to creating a tag based on the Custom Event template where :

  • Event Category = FAQ Click
  • Event Action = ClickButton
  • Event Name = {{ Click ID }}
  • For the Event Name we need to choose one of the default Variables – Click ID. It will collect the IDs of the particular clicked FAQ buttons.

    After that, we need to assign an applicable trigger. Every FAQ’s button leads us to the same URL that starts with help.piwik.pro/faq:

    The results are going to be visible right away in the Visitor Log:

    2. Scroll tracking

    This Event may give us the instant information about the page scroll percentage. It’s one of the easiest Events to set up. It’s just enough to set its options as below:

    And add the following trigger:

    Of course you can add a few similar tags with a different scroll percentage so the results in Analytics will give you the following information:

    3. 404 Status check

    This Event may be very useful – it will check HTTP status and will immediately let you know once the 404 page will be displayed to your visitors. Additionally, it will give you an information on what was the page that gave them such a result. The easiest way to do it would be to check what is the Page Title of the 404 website on your website (please note that tracking needs to be working on such a website). Our test website Page Title is Page Not Found

    Let’s create our Event then:

    Let’s create a Variable that will collect the page titles:

    And then we can use it in our Trigger:

    We can see the results right away in Visitor Log:

    Please note that it can also be done through the Segmentation feature. To find out how to do it, take a look at our article about Tracking 404 errors with unique page title and page reports.

    4. Tracking Outlinks with the same URL

    Let’s say that your website is full of external links that all lead to the same URL. You would like to know which link is mostly driving people to the URL. The case is quite easy when your links have separate IDs. If not though, it’s pretty important to set the additional Custom HTML tag that will add an ID to each link on your website.

    To do it create a Custom Asynchronous HTML Tag with the following content:

    <script>
    for(var i = 0; i < document.getElementsByTagName("a").length; ++i){
    var id = "link "+i
    document.getElementsByTagName("a")[i].setAttribute("id", id);
    }
    </script>

    IMPORTANT: Skip this step if your links already have the IDs.

    Then create a Custom Event Tag with the following content:

    5. Filling the form

    You may have a form on your website that you would like to track. Custom Events will help you perfectly here.

    To set up an Event:

    We need to create a series of Variables that will collect all the fields one by one. To do it let’s check the ID of a particular field:

    Once we have an ID of a given element, let’s just copy it to the Variable:

    Then we need to create Variables for all the fields in the same way.

    After that we can create a Tag based on the Piwik PRO Custom Event template:

    To choose the proper trigger we need to check the form ID:

    We will use it when creating a trigger:

    Please note that it can also be done through Audience Manager. Once you add the Audience Manager tag, it enables form tracking and passes data from your forms to your Audience Manager. To read more about this solution take a look at our article about Capturing Data Forms.