Goals

First of all, you need to understand the concept of a goal. A goal is something that you want to track that the already existing analytics are not tracking—anything from a button click, downloads, specific page view, like a thank-you page after a checkout…etc.

Pageview #

The pageview goal is the easiest to set up and the conversion of the goal will happen once a visitor reaches a certain specified page.

A good example would be when you have a ‘thank you’ page after the conversion happens (newsletter, purchase, form submission, etc.) where the user will land on after.

Custom #

Custom goals will require some extra code implemented to the tracked website, which is specified when you create a new goal from the dashboard.

A custom goal is mainly used when you want to track a specific event that happens on your website, which can’t be tracked with the pageview method.

Some examples of where custom goals will shine are:

Tracking clicks on external links
Tracking more advanced form submissions
Tracking clicks on specific parts of your pages

Here is what a javascript snippet would look like for goal tracking:

analytics.goal('my-goal');

When this code will trigger inside of your page, the goal conversion will be triggered as well on our side.

How to create a custom goal #

To create a goal, log in to your Overtracking account and press the icon of the cup . Depending on what you want to track you will have to do it differently:

How to track buttons #

1. Create a goal #

The first thing you have to do is go to your Dashboard, click on the target icon, and then click on the ‘Create goal‘ button. In the pop-up window, give a name to your goal and select the type of goal you want. you want to create. In this case, we will select ‘Button‘ and we have called it ‘social_shared‘ since we are going to track the share buttons on social media.

2. Add a class to the button #

Now that you have created a target, you have to add a class (class – not ID, they are different things) to the button you want to track. This allows you to identify the button in the JavaScript code. You have to keep in mind that you cannot have elements with the same class. In this case, we are going to call the class the button of the social network it corresponds to (WhatsApp, Facebook, Twitter…).

To add a class to the button, open your website’s HTML file and in the querySelector section look for the button you want to track. Add the class to the button:

button[class*=”facebook”]

button[class*=”whatsapp”]

3. Add JavaScript code #

Now you have to add this piece of code in the JavaScript file of your web page. You can add it anywhere in the file.

//esperamos a la carga de la página web
window.onload = function() {
      //add listener     if(document.querySelector('button[class*="facebook"]')) {
                document.querySelector('button[class*="facebook"]').addEventListener('click', function() {
                    analytics.goal('social_shared', 'facebook');
                });
            }  });
}

Remember that you have to change the part of the code where it says ‘social_shared’ for the key of your event and ‘facebook‘ for the class you have given to the button.

The final code with all the buttons would look like this:

//esperamos a la carga de la página web
        window.onload = function() {
           
            //add listener
            //add listener
            if(document.querySelector('button[class*="facebook"]')) {
                document.querySelector('button[class*="facebook"]').addEventListener('click', function() {
                    analytics.goal('social_shared', 'facebook');
                });
            }
           
            if(document.querySelector('button[class*="twitter"]')) {
                document.querySelector('button[class*="twitter"]').addEventListener('click', function() {
                    analytics.goal('social_shared', 'twitter');
                });
            }
           
            if(document.querySelector('button[class*="pinterest"]')) {
                document.querySelector('button[class*="pinterest"]').addEventListener('click', function() {
                    analytics.goal('social_shared', 'pinterest');
                });
            }
           
            if(document.querySelector('button[class*="whatsapp"]')) {
                document.querySelector('button[class*="whatsapp"]').addEventListener('click', function() {
                    analytics.goal('social_shared', 'whatsapp');
                });
            }
           
            if(document.querySelector('button[class*="telegram"]')) {
                document.querySelector('button[class*="telegram"]').addEventListener('click', function() {
                    analytics.goal('social_shared', 'telegram');
                });
            }
           

       
        }

4. Check the results #

To make sure you haven’t made any mistakes in the process, log into Overtracking and check to see if your Custom Values appear within the new Goal.

From the Overtracking Dashboard you should see something like this:

How to track links #

In this tutorial, you will learn how to track links on your website. This will allow you to know how many people click on your links, although depending on the type of link you will not be able to know if it has finished converting or not.

For example, imagine you want to track how many users register with Google. But of course, this takes you to an external page, so we are only going to count the clicks on the button (we could also track it in the Google callback, but we will show that in another tutorial).

1. Create a goal #

The first thing you have to do is go to your Dashboard, click on the target icon , and then click on the ‘Create goal’ button. In the pop-up window, give a name to your goal and select the type of goal you want. you want to create. In this case, we will select “Link” and in this case, we could call it ‘register‘.

2. Add JavaScript code #

Now you have to add this piece of code in the JavaScript file of your web page. You can add it anywhere in the file.

This, although it looks like a button, is a link that takes us to a URL that begins with this: https://accounts.google.com/o/oauth2

So we could code like this:

window.onload = function() {

if(document.querySelector('a[href*="https://accounts.google.com/o/oauth2"]')) {
                document.querySelector('a[href*="https://accounts.google.com/o/oauth2"]').addEventListener('click', function() {
                    analytics.goal('register', 'google');
                });
            }
}

In this code, you must change “https://accounts.google.com/o/oauth2” for part of your link or the complete link. Finally, modify the goal, changing the register key, for the one you created and Google, for the value you want to give it.

3. Check the results #

To make sure you haven’t made any mistakes in the process, log into Overtracking and check to see if your Custom Values appear within the new Goal.

How to track forms #

In this tutorial, you will learn how to track forms on your website using Overtracking. This will allow you to see how many people have submitted forms such as the contact form or the user registration form.

1. Create a goal #

The first thing you have to do is go to your Dashboard, click on the target icon, and then click on the “Create goal” button. In the pop-up window, give your goal a name and select the type of goal you want to create. In this case, we will select “form” and in this case, we will call it “manual”.

If you don’t know how to create a custom event, check out this tutorial.

2. Add a class to the form #

We need to define the tag in a class and instead of using the “click” event, we are going to use the “submit” event. In this case, we are going to use the class «is_form_register«

3. Add JavaScript code #

Now that you’ve added a class to the form, you need to add the JavaScript code that will track the form. To do this, open your website’s JavaScript file and add the following code:

The code would be this:

window.onload = function() {
if(document.querySelector(‘form[class=”is_form_register”]’)) { document.querySelector(‘form[class=”is_form_register”]’).addEventListener(‘submit’, function(e) {

                 //we stop the shipment
                 e.preventDefault();

                 //register the event
                 analytics.goal('register', 'manual');

                 //send the form
                 document.querySelector('form[class*="is_form_register"]').submit();
             });
         }
}

In this code, we have to highlight the following.

The form class is «is_form_register«. You must change it to the name of your class.
You must change the “register” password to the one you registered for the event.
Change “manual” to the value you have decided to better recognize the form.

4. Check the results #

To make sure you haven’t made any mistakes in the process, log into Overtracking and check to see if your Custom Values appear within the new Goal.

How to track searches on my website #

In this section, we are going to measure the searches that users make on our website. Most web pages search through a variable in the URL, so we are going to track that variable.

1. Create a custom event #

In this case, we have created a custom event called ‘search‘ and we are tracking the ‘s‘ variable. If you don’t know how to create an event, you can see this tutorial on how to create a custom event.

document.addEventListener("_ot_start", function(){
                        //obtenemos la url            var url = new URL(window.location.href);

            // Obtener el valor de la variable GET llamada "search"
            var searchParam = url.searchParams.get("s");
         
            if (searchParam !== null) {
                analytics.goal('search', searchParam);
            }
});

2. Add the code to your website #

We can put this code wherever we want, modifying s by the value of your search (usually something like /?s=overtracking). Also remember to modify the custom event value, which in this case is ‘search‘ but you can call it whatever you want.

How to track exit urls #

The exit URLs tell us which pages our users leave us from. This can help identify pages with content to improve, the success of your marketing campaigns or detect links or buttons that are better to move to other pages.

1. Create a custom event #

The first thing we have to do is create a custom event, in this example, we have called it ‘exiturl‘.

2. Add the code #

Now you have to add this code anywhere on the page. You just have to modify the event key which, in this case, is ‘exiturl‘ for the name you have given it.

window.onload = function() {

      //get exit url
              function trackExitLink(event) {
                    analytics.goal('exiturl', this.href);
              }
       
            // Obtén todos los enlaces en la página
            const exitLinks = document.querySelectorAll('a');
       
            // Agrega el evento de clic a cada enlace saliente
            exitLinks.forEach(link => {
                //si son enlaces externos
                if (link.hostname !== window.location.hostname) {
                    link.addEventListener('click', trackExitLink);
                }
            });

}

3. Check that you have implemented it well and analyze your data #

Once you’ve added the tracking code to your website, you can start analyzing your data. To view your custom event data, you’ll need to go to the ‘Goals‘ section of Overtracking. On the goals page, select ‘exiturl‘ or whatever you call it.

How to track the scrolling that users make #

The scroll percentage metric helps us know if people who enter our website find an interesting page or not, at what point in the article ‘we lose the reader’, or at what point it is better to introduce the call to action to ensure that the user sees it.

In this tutorial, we are going to learn how to measure the scroll and we will do it by creating a Goal.

1. Create a new goal and custom event #

The first thing is to create a goal, we have called it ‘scroll‘.

2. Edit and copy the code to your website #

Once you have your goal created and it is a custom event, you just have to edit the code and paste it on our website. You can enter it wherever you want.

In the following code, you just have to modify the variable var ot_nameEvent = ‘scroll‘; changing the scroll name to the one you gave to the goal.

<script type="text/javascript">

        var ot_nameEvent = 'scroll';
        var ot_scroll = {'25': false, '50': false, '75': false, '100': false};


        function ot_scroll_y() {
       
            //Obtenemos el el tamaño de la pantalla y de la página
            var windiws_height = window.innerHeight || (document.documentElement || document.body).clientHeight;
            var document_height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
            var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
            var trackLength = document_height - windiws_height;
            var scroll = Math.floor(scrollTop/trackLength * 100);

            //Comprobamos hasta donde llega
            if(scroll>=25 && ot_scroll['25']==false) {
                ot_scroll['25']  = true;
                analytics.goal(ot_nameEvent, '25%');
            } else if(scroll>=50 && ot_scroll['50']==false) {
                ot_scroll['50']  = true;
                analytics.goal(ot_nameEvent, '50%');
            } else if(scroll>=75 && ot_scroll['75']==false) {
                ot_scroll['75']  = true;
                analytics.goal(ot_nameEvent, '75%');
            } else if(scroll>97 && ot_scroll['100']==false) {
                ot_scroll['100']  = true;
                analytics.goal(ot_nameEvent, '100%');
            }

        }

     
        //Agregamos un listener para el evento scroll
        document.addEventListener("_ot_start", function(){
            window.addEventListener("scroll", function(){ ot_scroll_y(); }, false);
        });

    </script>

3. Delete the cache and check that it has been implemented correctly #

Once the code has been pasted, remember to delete the cache so that users can see the implemented code and thus track the events.

How to edit the existing goals #

Once you have created your goals, remember that you can see the statistics and edit them whenever you want.

To edit them you just have to click on the pencil that appears to the far right, make the changes you need, and click the “update” button.

General

Features

Affiliates

API

Account & Billing

Legal & Transparency

Comparatives

Goals

Pageview #

Custom #

How to create a custom goal #

How to track buttons #

1. Create a goal #

2. Add a class to the button #

3. Add JavaScript code #

4. Check the results #

How to track links #

1. Create a goal #

2. Add JavaScript code #

3. Check the results #

How to track forms #

1. Create a goal #

2. Add a class to the form #

3. Add JavaScript code #

4. Check the results #

How to track searches on my website #

1. Create a custom event #

2. Add the code to your website #

How to track exit urls #

1. Create a custom event #

2. Add the code #

3. Check that you have implemented it well and analyze your data #

How to track the scrolling that users make #

1. Create a new goal and custom event #

2. Edit and copy the code to your website #

3. Delete the cache and check that it has been implemented correctly #

How to edit the existing goals #