Forem: Danilo à Tellinghusen ▪️ ☕ & 🍕

Simple Analytics Integration in Ionic Mobile Apps

Danilo à Tellinghusen ▪️ ☕ & 🍕 — Mon, 29 Jan 2024 07:30:13 +0000

While creating my app [RDZN] - German Football, I was in search of an analytics solution that is compliant with German law, user-friendly, and easy to integrate. Nothing easier than that 😅.
The goal is to track essential data, enabling me to consistently improve the app and offer users an enhanced and more enjoyable experience.

1. What is [RDZN] - German Football?

[RDZN] - German Football is a mobile app about American Football in Germany, focusing on the first German Football League (GFL) and the second German Football League (GFL2).
The app is built using Ionic, Angular, Capacitor and with an AWS Serverless Backend in the background. You can download it on Apple App Store and Google Play Store.

After approximately 4 years in the app stores at the beginning of 2023, RDZN achieved official partner status with the GFL and GFL2, marking a profound personal achievement. The acknowledgment as an "official partner" prompted the integration of a new analytics service within the app. This decision aimed to enhance compliance with German regulations and mitigate potential legal issues, reflecting a commitment to aligning with local laws.

2. Challenges with Traditional Analytics in Germany

Understanding how analytics works in Germany has its own set of challenges, especially when dealing with the rules about how data can be used and keeping everything in line with the law. Even though regular analytics tools are quite effective, they face certain difficulties specific to Germany.

The General Data Protection Regulation (GDPR) casts a substantial shadow over analytics practices. With the focus on protecting user privacy, German data protection laws are stringent. Following this law can be tricky for traditional analytics tools because they might struggle to get clear permission from users before collecting and using their data.

Even popular tools like Google Analytics face challenges in Germany. The data collection practices of such tools may not always align with the strict standards set by German privacy laws. This misalignment raises concerns about the legality and ethicality of data handling, leading to a search for different solutions.

Given these challenges, there's a growing need for analytics solutions that focus on keeping user data private, following GDPR rules, and fitting seamlessly with German data protection laws. So I started looking for a better suitable solution for [RDZN].

3. Simple Analytics: A Great Choice

For my app, I needed a tool that complied with the rules of strict German data protection laws and had a solid commitment to user privacy and transparency. During my research, I came across several similar services that met my requirements. However, one particular product captured my attention due to its simplicity, design, and impressive set of features.

Let's delve into the features and benefits that make Simple Analytics a superior and more compliant choice, especially when compared to the widely used Google Analytics.

Features and Benefits

Simple Analytics is like a protective fortress for your data and will never store any personal data about your visitors, unlike some tools that might engage in shady practices.
Transparency is a core value for Simple Analytics. It is an Open Startup and operates openly, giving users a clear view of how their data is treated and how their business is going. This ethical approach perfectly aligns with RDZN's commitment to trustworthy analytics.

Designed for user-friendliness, Simple Analytics presents easy-to-understand AI-driven insights, simplifying the navigation through complex reports. This ensures RDZN gains meaningful insights without drowning in data complexity.

Security is a top-tier concern for Simple Analytics, employing encrypted data storage and strict measures to keep RDZN's analytics data confidential and secure.

As an EU-based entity, Simple Analytics embraces the privacy standards set by the European Union. Beyond being a feature, privacy protection is the business model of Simple Analytics. It aligns with various privacy policies, including GDPR, PECR, CCPA, and more.

Unlike Google Analytics, Simple Analytics works without invasive cookies. This cookie-free approach respects user privacy and saves users from annoying cookie banners, creating a smoother experience.

With Simple Analytics, I get real-time analytics insights without messing with user privacy. It allows immediate responses to user behavior while keeping privacy a top priority

**Here's a summary of all key features:

Aligning with GDPR, PECR, CCPA, and more.
Embracing simplicity, the dashboard offers insights in a straightforward and user-friendly manner.
Just chat with AI to make analytics more intuitive.
Zero Personal Data Storage, No Cookie Banners: They don't store personal information, eliminating the need for annoying cookie banners.
Goals-Tracker and Events Explorer: Keep a close eye on crucial events and conversion funnels
Lightweight Script for Increased Website Speed

In a nutshell, Simple Analytics is the perfect fit for RDZN, offering features and benefits that not only amp up analytics capabilities but also resonate with the principles of privacy, transparency, and user trust.

4. Integration Guide: Ionic Mobile App

In the first place, Simple Analytics is designed for websites and not directly for mobile apps. However, why not use it in web-based mobile apps like Ionic apps?

The [RDZN] - German Football App is an Ionic/Angular app and for that, I will show you how easily you can integrate Simple Analytics into your Ionic app.

4.1 Integration via Javascript

Simple Analytics provides a script that you can embed within the

<body> tag of your website or your index.html of your Ionic Angular/React app.
<html>
<head>...</head>

<body>  

  <app-root></app-root>

<!-- Simple Analytics -->
  <!-- Default Script --> 
  <script data-collect-dnt="true" async defer data-hostname="your-domain.com"
    src="https://scripts.simpleanalyticscdn.com/latest.js"></script>

  <!-- Use Pixel for visitors with disabled JavaScript --> 
  <noscript>
      <img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt=""
      referrerpolicy="no-referrer-when-downgrade" />
  </noscript>

</body>
</html>

Simple Analytics gives you several settings parameters that allow you to customize the tracking script. For example, you can replace the default SA CDN domain with your own subdomain. This has the advantage of bypassing ad blockers that generally block analytical scripts.
Here you can find more information about the various script settings:

Simple Analytics documentation

4.2 How to Collect App Events

With the Simple Analytics script, you can now send and gather your custom events. To simplify this process, they've developed a dedicated automated events script. Installing this script once will enable tracking for standard events such as outbound links, clicks on email addresses, and the number of downloads for commonly used file types (pdf, csv, docx, xlsx).
You can add the script to your tag too.

<body>
  ...

  <!-- Auto Event Tracking --> 
  <script async src="https://scripts.simpleanalyticscdn.com/auto-events.js"></script>
</body>

But now, let's dive into how to collect custom events and get our hands dirty! 😁

Within your application or website, you can use the JavaScript sa_event - function to create events.

To track an event you can do this:

sa_event("click_signup", {some metadata});

Now, we want to employ this event function in our Ionic/Angular application. To do this, we generate a *.js file in our ./assets/js folder and add the following code:

//sa-event-service.js
function trackSaEvent(eventName, eventData) {
  sa_event(eventName, eventData)
}

If you want you can use this function directly in your Angular Components to track custom events:

//app.component.ts

//Some imports here
import {...}

//Add Event service for SimpleAnalytics
declare const trackSaEvent: (...args: any[]) => void;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  constructor() {}

  ...

  //Track custom event
  trackSaEvent('click_signup', {
      platform: 'android',
  });

}

Or use the function directly in HTML:

<!-- signin-form.component.html --> 

<button
    type="submit"
    onclick="sa_event('auth_sign_in_btn_click')"
    class="...">
</button>```



Because this solution is not yet optimal, let's construct a suitable Angular service.



```//analytics.service.ts 

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

//Event service for SimpleAnalytics
declare const trackSaEvent: (...args: any[]) => void;

@Injectable({
  providedIn: 'root',
})
export class AnalyticsService {
  constructor() {}

  trackEvent(event: string, data: any) {
    //Only send event data to Simple Analytics in prod mode
    if (environment.production) {
      trackSaEvent(event, data);
    } else {
      console.log('Analytics Event', event, data);
    }
  }
}

//app.component.ts

//Some imports here
import {...}

//Add Event service for SimpleAnalytics
declare const trackSaEvent: (...args: any[]) => void;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

 constructor(
    private analyticsService: AnalyticsService,
  ) {
    ...
  }

  ...

  //Track custom event
   this.analyticsService.trackEvent('click_signup', {
        platform: 'android',
   });
}

That's all 🤙!
You can now collect events for all kinds of custom events. Like form submits, button clicks, open pages or views and many more.

5. Simple Analytics Dashboard

By default, Simple Analytics captures all visits and page views on your website or app, along with their sources. You can then analyze this data within the straightforward and neat dashboard.
In addition to information about visits and visitors, you can also view the default and custom events sent by the app 👍.

6. Conclusion

Creating a mobile app comes with its challenges. Understanding how people use the app while respecting privacy laws, is crucial. RDZNfaced this challenge and found a reliable ally in Simple Analytics.

Traditional analytics tools posed problems with privacy and German laws, so I needed a solution that fit the bill. Simple Analytics, with its privacy-focused approach and user-friendly features, turned out to be the perfect fit for me.

By teaming up with Simple Analytics, RDZN not only got a tool for understanding user behavior but also a trustworthy partner in respecting user privacy. The process of bringing Simple Analytics into the app was smooth, and the ability to customize tracking scripts and use automated event tracking made it even better.
In a nutshell, Simple Analytics became the go-to solution for my Ionic/Angular app, paving the way for a more secure and user-focused future for mobile apps and websites. I am so satisfied with the solution that I now also use Simple Analytics in my new project MakersDiary.

The lesson here is clear: making apps better doesn't have to come at the cost of user privacy, and services like Simple Analytics are leading the way.

Why I Switched From AWS Cognito To Supabase The Week Before My Startup Launched

Danilo à Tellinghusen ▪️ ☕ & 🍕 — Mon, 05 Dec 2022 23:10:44 +0000

Authentication is a very important part of any website. It's the thing that protects your users' data, and it's also the thing that, if implemented incorrectly, will kill your startup before it even begins. 😶
However, there are many well-known authentication solutions that can be used for your startup because they will save you time and prevent risks to the success of your business - provided you choose the right one 😅

Backstory

When I started my startup MakersDiary, I decided from the outset that it made more sense for me to use an established solution - even if it costs money.

MakersDiary is the first platform designed specifically to help indie makers and developers to share their journey in public. Track and manage their side hustles and startup projects to share all relevant information, successes, and struggles with the build-in-public community.

For authentication, MakersDiary started with AWS Cognito via Amplify, a great choice for a small startup that will be a serverless web application. I was using the Cognito User Pools, an authentication provider that allows MakersDiary to use a user pool with the AWS credentials of each user. When users sign into their account, they are redirected to my serverless web application that can handle all necessary needs.

The Cognito Problem

In the beginning, Cognito was really easy to set up but as MakersDiary got more complex I started to struggle with this solution. AWS is awesome but also very complex and extensive with a very steep learning curve.

Problem 1 - ❌

It can happen that you lose yourself very quickly in the configuration and implementation so that everything works as desired. While I really love doing heavy implementation and learning more to be able to code what I want, it didn't help when I want to release my product quickly.

So you have to develop and maintain your own backend service running on AWS Lambda that will handle the user auth process including pre- and post-auth functionalities like sending nice looking welcome or signup-confirmation emails. This is quite a big effort especially if you don't have such experience.

Problem 2 - ❌

The next problem arose when I started to implement third-party authentication like Twitter. With MakersDiary users can share their project information, monthly revenue & user updates, and much more directly on Twitter.

While Cognito is a great solution for setting up your own authentication, it has almost no support for third-party authentication (except for Amazon, Apple & Google). So I had to implement the Twitter OAuth process by myself for MakersDiary.
Even if there are great libraries like passport.js or twitter-api-v2, the manual implementation is still very time-consuming and gives me quite a headache.

For example, after a user authenticates with Twitter all necessary information has to be written into the AWS Cognito User Pool so that you have all such information within your JWT token on your client to show e.g. the Twitter handle, name and profile image. It is all absolutely possible but a bit tricky and complex. 😪

Later I realized that MakersDiary should support other social media providers e.g. LinkedIn beyond the MVP, so I'll have to implement this functionality again by myself.

Problem 3 - ❌

MakersDiary users can upload their profile images, project logos and screenshots to add them to the projects they create. For this case, I used an AWS S3 bucket storage. If you just need a public bucket without any restrictions S3 is very easy to use. But if you want to restrict access to certain AWS accounts, S3 becomes very complex. In my case, I needed to restrict access to some specific JWT token holders with my AWS Cognito users, IAM roles and policies. And here the pain begins 😅…

The Decision

After I while I saw more and more problems here which will block or at least slow me down sometimes. I was thinking about AWS Cognito is may not that easy and suitable solution for a small one-man startup.

At this point, MakersDiary was not yet released, and no users had signed up. This made it easier for me to migrate away from AWS Cognito to another auth service than if I did so later with active users.

So I decided to search for another auth service.

My first idea was to move to Auth0 one of the biggest auth services out there. But the Auth0 pricing model is very expensive at a later stage of your Startup and after reading Kevin Grüneberg's article about how Parqet had to migrate from Auth0 to Supabase for that reason, I investigated further.

Why Supabase?

Supabase is an open-source alternative to Firebase. They use the slogan "Build in a weekend. Scale to millions" and I can say that is not a lie 😃.

It allows you to set up the top 3 main parts of your app in almost no time.

Authentication
Database
Storage

You can start with Supabase with a free plan which is absolutely suitable for a young startup. If your startup grows you can upgrade to a fair-priced pro plan without any problems.
What I really like about Supabase is its simplicity. You can set up the whole app in one day with just a few lines of code. This means that you don't need to spend a lot of time on backend development and can focus on building your app. It's also open source so you have full control over your data.

Problem 1 - ✅ Solved

I planned to release MakersDiary in around 7 days so the decision to move from Cognito to another auth service could put my whole release at risk. Luckily Supabase has quite nice documentation and initial database scripts so setting up my first project was no problem.

Once you become familiar with the dashboard's initially confusing navigation, setting up everything becomes very easy. 😁

In my case, I just needed the auth service and some databases to store the user and the user's profile information. All my other databases will stay on AWS DynamoDb.

So I added an email/PSW auth flow for MakersDiary with a post auth confirmation email. In the Supabase free plan, you can have up to 50.000 active users - a number that should be sufficient for most small startups. I would be thrilled to have such a large amount of active users for MakersDiary 😎.

//User sign up
async signUp(signUpObject: any) {
  return await this.supabase.auth.signUp({
    email: signUpObject.email,
    password: signUpObject.password,
    options: {
      data: {
       //Some meta data e.g.
       //first_login: true
      },
    },
  });

  return { data: data, error: error };
}

//User sign in
async signIn(email: string, password: string) {
    return await this.supabase.auth.signInWithPassword({
      email: email,
      password: password,
    });
}

//User sign out
async signOut() {
  const { error } = await this.supabase.auth.signOut();

  if (!error) {
    this._session = null;
  }
}

Supabase supports Trigger functions for any database row manipulation. So you can trigger a DB script in PostgreSQL Structured Query Language (PL/pgSQL) when e.g., a new user has been added or the profile of an existing user was updated.

BTW: Supabase provides an easy way to create and customize HTML email templates for all types of emails.

Problem 2 - ✅ Almost solved

Unlike AWS Cognito, Supabase supports all major social providers so that you can offer your users to sign in with any of them - with only a few minutes of setting up and a few lines of code.

async signInWithSocial(provider: string) {
    return await this.supabase.auth.signInWithOAuth({
      provider: 'twitter',
      options: {
        scopes:
          'tweet.read users.read offline.access tweet.write follows.read like.read like.write list.read list.write tweet.moderate.write',
        redirectTo: 'https://example.com/welcome',
      },
    });
  }

The little fly in the ointment was that Supabase hasn't supported Twitter Apiv2 for that long, so the use of it doesn't seem to be well documented or I just didn't find it in a short time.

So the Twitter sign-in was working well, but I had problems getting all the information - Twitter Apiv2 accessToken, accessSecret and refreshToken - that were needed for my server to use later for making calls against that service.
But I didn't mind that because my own implementation of the Twitter OAuth sign-in process was working well so I used that again. 😅

But now I'm prepared for a future where MakersDiary can be accessed through several other social media providers.

Problem 3 - ✅ Solved

My third pain point was finding a storage solution where authenticated users can upload and access files and if necessary generate signed URLs to share them in public.

Supabase allows you to store 1 GB of files for free, which should be enough space for the first profile images and project logos.
I love how easy it is to store and update files, as well as generate public URLs from your client application with a few lines of code.

//Upload avatar image
private async uploadAvatar(file, filepath) {
  return await this.supabase.storage
    .from('avatars')
    .upload(filepath, file, {
      cacheControl: '3600',
      // upsert is set to true, the file is overwritten if it exists
      upsert: true,
    });
}

//Download avatar image
private async downloadAvatar(filepath) {
  return await this.supabase.storage
    .from('avatars')
    .download(filepath);
}

//Creates public url
private async getPublicFileUrl(storage, path) {
  const { data } = this.supabase.storage.from(storage).getPublicUrl(path);
  return data.publicUrl;
}

Conclusion

I didn't go too deep into technical detail here because it would be beyond the scope of this article.

I'm really happy with my decision to move from Cognito to Supabase. The new MakersDiary auth process is easier for users and allows me to expand without putting more stress on myself - something I couldn't handle if the site's growth with Cognito and S3.

Even if supabase is still at the very beginning of a great journey, it is already a very big help for small startups and side hustles. Next week the new release of Supabase will launch and I'm looking forward to which new great features will be added. 🙂

I hope that this post helped you understand how I solved the three main pain points of my project and made it better for everyone.
If you have any feedback or questions, please let me know in the comments!

Special thanks to Kevin Grüneberg for his help in troubleshooting my first attempts at creating PL/pgSQL scripts. 😁💜