DEV Community

Cover image for SaasRock v0.5.0 - Cookie consent and built-in Analytics
Alexandro Martinez
Alexandro Martinez

Posted on

SaasRock v0.5.0 - Cookie consent and built-in Analytics

Let your users know the cookies used on your site, and track their page views and events with the built-in analytics Enterprise feature.

Watch demo here.

Cookie Consent 🍪 - Core feature 🪨

Many third-party tools use cookies to store private user data, which could break compliance rules in some countries (and we don't like being tracked) if the user did not give consent.

SaasRock's v0.5.0 comes with a cookie banner + settings that ask your users to allow the website cookie usage and their purpose.

Cookie Banner

A banner will show up on every page until the user selects its preferences.

Cookie Banner

Cookie Settings

If the user wishes to inspect each cookie, they can open the cookie settings modal.

Cookie Settings

Usage

Ever time you add a new cookie detail, it will ask the user to allow (or deny) it.

Here are the initial Cookie Categories at app/application/cookies/CookieCategory.ts:

Cookie Categories

For every cookie you'll use, add its details at app/application/cookies/ApplicationCookies.ts:

Application Cookies

Now, you can check for cookie consent. Let's see how we can set the Google Analytics script at root.tsx inside the body tag - using the ADVERTISEMENT cookie category:

Google Analytics

I'm using the function CookieHelper.hasConsent(...) by passing the current user session and the cookie category. This function can be used on the backend (loaders and actions) and on the frontend (React components).

Built-in Analytics 📈 - Enterprise feature 🚀

Now that cookies are set 🍪, your site will track anonymously for page views and actions.

Why a built-in analytics solution?

SaasRock does not intend to invent the wheel, there are great analytics solutions out there, both free and powerful. But SaasRock’s main goal is to have everything you need when building SaaS applications, at least in a minimal way.

But the main reason I’m starting to build a built-in analytics solution is to have a built-in Affiliates and Referrals program, and for that, I need to identify UTM tags within SaasRock/your-SaaS (although I know nothing about how to use them yet, so expect a lot of bugs 😅).

What does SaasRock store?

Unlike privacy-friendly tools like Plausible Analytics or SimpleAnalytics, SaasRock DOES use a cookie saasrock_analytics.

But this doesn't mean that SaasRock stores private data, I tried to store on the database as few data as possible:

  • Cookie: to identify unique visitors
  • HTTP Referrer
  • Browser
  • Operating System: I'm using the platform library
  • UTM tags: source, medium, campaign, content, and term

SaasRock does not store the IP or the raw user agent.

Here's the AnalyticsUniqueVisitor database (prisma) model:

AnalyticsUniqueVisitor

Analytics Admin UI

Overview - Summary of Unique Visitors, Page Views, Events, and Live visitors

Overview

Unique visitors

Unique visitors

Page views

Page views

Settings

Settings

Public Analytics - You can have the analytics data publicly available, click here to view.

Public Analytics<br>

What's next for Analytics?

Of course this is v0.0.0.0.0.1 of the analytics feature, but I needed a built-in Analytics starter in order to start developing the upcoming Enterprise feature for Affiliates and Referrals, so I need to make sure that page views are tracked correctly.

Planned:

Optional:

  • Use an API to identify the user's country and city with its IP.
  • I'll try to figure out how to identify unique visitors without using cookies, like Plausible Analytics.

Subscribe to SaasRock's newsletter for more!

Top comments (0)