Track first time visits ever with Metricalp

The beauty of Metricalp is that we designed it to be flexible and efficient as much as possible. So, you can solve different variety of problems with it. One of the common problems that you might want to solve is to track first time visits ever. In this usage case, we will show you how you can track first time visits ever with Metricalp.

In Analytics, we categorize users into two groups: new users and returning users. New users are the users who visit your website for the first time. Returning users are the users who visit your website more than once. In this usage case, we will show you how you can track first time visits ever with Metricalp. With a few basic implementation steps, you can achieve it. Metricalp easily provides you the flexibility to achieve this target. We will mostly use "custom props" feature of Metricalp to achieve this.

First thing to do is detecting is a user new (first time visit) or a returning user. We will use localStorage to store a flag to detect this. It will be just a dummy true/false flag. It will not include any personal data so for most cases it will OK but for some cases based on your location / sector and users location you may need to ask for user consent to store this flag or at least inform them about this in your privacy policy. That is on your responsibility. Lets call this flag "vis_bef" which means "visited before". Okay, lets check the code snippet below:

        <script>
          const isFirstVisit = !localStorage.getItem('vis_bef');
          if (isFirstVisit) {
              localStorage.setItem('vis_bef', 'true')
          }
        
          window.metricalp = window.metricalp || {
            queue: [],
            sharedCustomProps: {
              _global: {
                custom_prop3: isFirstVisit
              },
            },
            event: function (e) {
                this.queue.push(e);
            },
          };
        </script>
        <script src="https://cdn.metricalp.com/event/metricalp.js" data-tid="YOUR_TID" async></script>
        

Let's add a few notes here. We are telling through pure js integration, if you are using our React library to integrate please follow its documentation to achieve same result. The other thing is we are using sharedCustomProps feature above. You can check it in our documentation to learn more about it. Okay, we read the flag from localStorage, if it does not exist that means this is a first visit. If it exists, it means this is a returning user. We are setting this value to a custom prop as "custom_prop3". Also you can set a custom prop name alias to this custom prop -which we will do it below- like "is_first_visit_ever: true" again check Custom Events and Props documentation for custom props and aliases. Now for any events (including page views) that you send to Metricalp, this custom_prop3 will be included as is this a first ever visit of current user or not.

But, there is a catch here. If you are using a JavaScript based framework which has SPA-like routing (like React, NextJS, Angular, VueJS etc.) the above code will be executed once within all session of a user. But for other systems (like PHP, pure HTML etc) it will be executed once per a page view (navigation). So, while the first visited page will count as a first_visit_ever the second page will count as a returning user. But the current session is still a first visit ever session unless user completely leaves your website and revisits again.

To solve this issue, you can use the following code snippet. It will check if the user is a first time visitor ever in the current session (we will use sessionStorage addition to localStorage). If it is, it will set the custom prop as true. If it is not, it will set the custom prop as false. The code snippet is below:

            <script>
              const isContinueFirstSession = sessionStorage.getItem('first_session');
              const isFirstVisit = isContinueFirstSession || !localStorage.getItem('vis_bef');
              if (isFirstVisit && !isContinueFirstSession) {
                      sessionStorage.setItem('first_session', 'true')
                      localStorage.setItem('vis_bef', 'true')
              }
            
              window.metricalp = window.metricalp || {
                queue: [],
                sharedCustomProps: {
                  _global: {
                    custom_prop3: isFirstVisit
                  },
                },
                event: function (e) {
                    this.queue.push(e);
                },
              };
            </script>
            <script src="https://cdn.metricalp.com/event/metricalp.js" data-tid="YOUR_TID" async></script>
        

Now, we have another flag "isContinueFirstSession" it means this session is user's first ever session and it still continues. User is just navigating through our website. For example, if user clicks buy button and we produce a custom event for this action like click_buy, that event will also have custom_prop3 (is first visit ever) true. So, we can check that how many users clicked buy button in their first ever visit. Also the opposite, how many user clicked buy button in their returning visits. This can affect your marketing strategies and targets. This is the beauty of Metricalp, with simple touches you can achieve great potential data about your users.

But as you see that custom_prop3 is hard to remember in dashboard. We have custom aliases feature in Metricalp for this, to make things easier to remember and maintain. While we are passing isFirstVisit flag to globally (to all events), custom aliases work event based. Lets define an alias on screen_view and click_buy events for custom_prop3 and name it as "is_first_visit_ever".

Now, only these two events have the aliases and we will pass our custom prop as these aliases, it will be ignored for other events. (You can still send it as as custom_prop3 then it will work for all events and will be more readable for that alias defined events in dashboard but will stay as custom_prop3 for others. But here we want to keep readable also sending data phase additionally to dashboard, so we will use alias also while sending event.). Lets update our code snippet one more time:

  
            <script>
              const isContinueFirstSession = sessionStorage.getItem('first_session');
              const isFirstVisit = isContinueFirstSession || !localStorage.getItem('vis_bef');
              if (isFirstVisit && !isContinueFirstSession) {
                      sessionStorage.setItem('first_session', 'true')
                      localStorage.setItem('vis_bef', 'true')
              }
            
              window.metricalp = window.metricalp || {
                queue: [],
                sharedCustomProps: {
                  _global: {
                    is_first_visit_ever: isFirstVisit
                  },
                },
                event: function (e) {
                    this.queue.push(e);
                },
              };
            </script>
            <script src="https://cdn.metricalp.com/event/metricalp.js" data-tid="YOUR_TID" async></script>
        

It is ready. Lets visit our website, click buy button. Exit our website, revisit it and click buy button again. Then check events and custom props in our dashboard:

Wow, we did it, it is working and awesome, congrats on you 🚀

Our is_first_visit_ever flag is working independent by time (unless user changes browser/device). So, lets say a user visited your website first ever today. We sent is_first_visit_ever flag as true. Then user left from website and visited again in same day and this time we sent is_first_visit_ever flag as false. Now true is 1 and false count is also 1 in our dashboard for is_first_visit_ever. User left the page and revisited again in same day, we sent is_first_visit_ever flag as false again (from now every visit will be false always). But the our is_first_visit_ever prop the false count is still 1 in dashboard because it shows unique count per prop. If user revisits in next day, it will be again non-unique so count will not increase. So, if we look weekly report in our dashboard the counts will be like 1 for true and 1 for false. We will see that how many 'unique' true and false provided in selected time range. So, ever first visit true shows how many first time usage and false shows how many unique returning user, very valuable two metric which we achieved easily with Metricalp 🚀