Simple Analytics Integration in Ionic Mobile Apps

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.