Hey folks,
Welcome to another blog. This blog is a bit different. Codesphere recently held a mini hackathon where everyone wins a prize. This blog is a part of that challenge.
So, have you ever wondered whether you can host your own Google Analytics alternative (because Google collects a lot of data from it)?
If yes, you’re on the very correct blog post!
Let’s dive into how we can deploy our own Analytics service using Codesphere Cloud!
First of all, why Umami?
Umami emerges as an appealing option for website analytics due to its self-hosted, open-source design, granting website admins complete control over their user's data and privacy. Now bring that with Codesphere, a secure and dependable hosting platform, and you get a seamless experience. Codsphere provides a sturdy server infrastructure, streamlining Umami's setup process and making it user-friendly, even for those lacking technical expertise. With Codsphere's hosting, users enjoy consistent performance, security, and a supportive environment for running Umami Analytics. This capability of Umami's features and Codsphere's hosting capabilities establish a potent and accessible solution for the best web analytics experience.
Umami vs Posthog vs Google Analytics Feature Comparison
| Feature | Umami | Posthog | Google Analytics |
|---|---|---|---|
| Self-hosted | ✔ Yes | ❌ No (Cloud-based) | ❌ No (Cloud-based) |
| Open Source | ✔ Yes | ✔ Yes | ❌ No |
| User-Friendly Interface | ✔ Yes | ✔ Intuitive UX | ❌ Can be complex for beginners |
| Real-time Data | ✔ Yes | ✔ Real-time event tracking | ❌ Delayed data updates (not real-time) |
| Extensive Features | ❌ Limited | ✔ Feature-rich | ✔ Wide range of features and reporting options |
| Integration Options | ❌ Few | ✔ Broad integrations | ✔ Seamless integration with Google products |
| Data Privacy | ✔ Full control over data | ✔ Emphasis on data privacy | ❌ Hosted on Google servers, potential privacy concerns |
| Large User Base | ✔ Vast user community on Github | ❌ Smaller Community Than Others | ✔ Vast user community and extensive documentation |
| Own Server Setup | ✔ Required if self-hosting | ✔ Required if self-hosting | ❌ Not applicable (cloud-based) |
| Learning Curve | ✔ Easy to set up | ✔ Straightforward setup process | ✔ Easy to set up |
| Ecosystem | ❌ Limited | ❌ Developing ecosystem | ✔ Part of the Google Marketing Platform |
Note: Tick marks (✔) indicate the presence of the feature, while crosses (❌) indicate the absence or limitations in that aspect.
If you're convinced to use Umami with significant advantages over traditional analytics tools like Google Analytics or Posthog, see below the steps for installing it!
Steps for installing Umami on Codesphere.
Signup On Codesphere — https://codesphere.com/
Create a new instance using the “+ New Workspace” button.
Put in the URL: https://github.com/codesphere-community/Umami in the input box.
Choose the “Boost” plan at the minimum with Always On/Off or when unused based on your requirements (installation might crash on the other lower plans due to lack of resources/storage).
Click on the “Create button”.
Go to the “Setup” section on the top-left and then click on “Env vars”.
Click on “+ Add new variable” and then put DATABASE_URL in the left input box.
Enter your database MySQL / PostgreSQL Database URL (You can create one on Codesphere if you don’t have it) in the right side input.
Go to the CI Pipeline at the bottom of the screen.
Click on the Prepare section and then press the “Run” button.
My ci.yml will do all the work for you. Wait for the “Prepare” box to end. Afterward, Go to the Run section and click the “Run” button.
Once ✓ Ready is displayed in the terminal, click on the Open Deployment button on the top panel. Enter the default Umami credentials i.e., username: admin and password: umami
You're ready to now use it on your site!
Also, If the restart fails in the future, Follow step 9, then directly go to the Run section, and then click the "Run" button.
Steps for adding Umami to your website.
Login with the credentials (if unchanged, follow step 12's credentials)
Click on "Settings" on the header.
Click on "+ Add Website".
Enter the name and the domain of your website example: (Example Website, example.com).
Click on "Save".
Check your website in the list and click the "Edit" button.
Go to the "Tracking Code" section and copy the script.
Paste the tracking code in the <head> tag of your website.
Go to the "Dashboard" option.
Done, this should display your Website's statistics!
Just keep in mind to change your Umami password to prevent unauthorized access to your analytics service!
A/B testing with Codesphere & Umami.
A/B testing is a statistical method used in marketing and product development to compare two versions, A and B, of a webpage, email, or other content to determine which performs better. The goal is to identify changes that positively impact user engagement, conversion rates, or other key metrics. Randomly assigned groups of users are exposed to either version, and their behavior is analyzed to assess the effectiveness of each variant. By isolating variables and measuring outcomes, A/B testing helps businesses make data-driven decisions, optimize user experiences, and refine strategies for optimal performance in areas such as website design, marketing campaigns, and product features.
Note: A custom domain is required for setting this up.
Let's see how to do this using Codesphere's advanced functionalities!
- Create 2 new workspaces for your A/B testing instances. Enter the code of the two versions of the website in each of these workspaces.
- Copy and paste the tracking code (follow steps for adding a website above to get this code) in the <head> tag of the website paths that you want to be tracked. This will track the website analytics.
- Create a new <script> tag inside the <body> tag.
- Inside the created <script> tag (in the <body> tag), put the code:
umami.track('Website <A/B>');. Change the A/B in the above string based on which version of your site you're on or put any value that differentiates between the two website versions. In my case, I put 'A/B 1' and 'A/B 2'. Learn more about this here: https://umami.is/docs/tracker-functions - Go to the domain section in Codesphere and register your domain.
- Select the two A/B workspaces that you want to test on that domain from the "Workspaces" dropdown. This will now automatically display the two versions of your website.
- To view your results, go to the Umami dashboard, click on "View Details →" and scroll to the bottom.
- Your events should be displayed in the events section.
Thanks for taking a look 😁
Hope this blog helped you learn and do something new!
Top comments (0)