Optiblack Content

Every SaaS Retention Technique is on this List

Retention Case Studies

Emails for Retention

Building a SaaS Churn Predictor

Setting up Mixpanel with Softr.io for no-code applications

Explore

Setting up Mixpanel with Softr.io for no-code applications

Author: Vishal Rewari, Optiblack

The article is about how we helped Max, a 7 figure agency owner, launch his Growth Hacks University for public built with no-code tool

Softr.io⁠

and setting up the entire funnel from page visit to paying customer

How it started

Max Bidna, also known as Marketing Max on the internet was looking for Mixpanel expert

Max had recently sold his 7 figure agency and was working on Growth Hacks University

Growth Hacks University is built on

Softr.io⁠

- a no-code tool to create web-apps

For his marketing funnels, he was looking to implement Mixpanel to track which user is doing what and he posted the same on Twitter

One of my known colleague - Chinmaya Shankar who runs a web development agency recommended me

Max reached out to us and we got started talking about what he has built and what he is looking for in Mixpanel

⁠

Screenshot 2022-09-10 at 11.25.26 AM.png

⁠

Screenshot 2022-09-10 at 11.24.29 AM.png

⁠

Challenge

There were 2 Challenges

The challenge was, it was not a typical web app made by a developer from ground up, Growth Hacks University was made on

softr.io⁠

and you have to be really creative when you can run the tracking code

Max wanted it to be done in next 2-3 days as he wanted to launch the website on coming Sunday and Labour day Holiday in US

Solution

Looking at the challenge and tight timeline, we went deep into it

The solution came from leveraging the custom code option on

Softr.io⁠

⁠

The Custom Code block is a powerful feature which allows you to insert custom snippet of code, including HTML, CSS and/or Javascript, anywhere in your application.

For Mixpanel implementation we leveraged their Javascript Library, to make the Mixpanel work properly, it requires code in 2 places

Header code to initialise

Event driven code to capture the event

For the header code we leveraged the Custom Code block that was available in the settings tab of the application in Softr.io

Here we installed the Mixpanel Code to initiate added events like view page

⁠

⁠

After this we started receiving the “Page View” event in Mixpanel for all the pages we visited.

By default page view was tracking the URL, UTM etc which helped us identify which pages were being visited and how.

⁠

⁠

Now we needed a way to track the users and identify the users who have logged in to the system

For this we leverage identity and alias functions in Mixpanel using custom code.

We call alias function when we have a sign up and an identify function when we have a login event

This gets tricky because, soft does not have a custom code that can run on button leading to the calling the action event. To circumvent this, we created 2 new pages in

soft.io⁠

which will be visited only when we have the event happening and once user go to any other page you cannot come back to this page from any other page in the application

Hence we created 2 new pages

Welcome

Home Student Login

To capture the events on page visit, we created a custom code block on the page and made it invisible by reducing the padding and giving only 1 px border giving us a view where the custom code block is not visible to the human but we can add our own code

In this custom code block then we added the Mixpanel code to call the login and sign up event

This helped us starting to see the login event

⁠

⁠

Now the next step was in identifying when the payment happens

For this Max was using Stripe and then we added Zapier integration. Whenever a new payment happened we added 2 events from Stripe through Mixpanel through Zapier integration

New Payment in Stripe → New Event in Mixpanel

New Payment in Stripe → Update the Profile Status in Mixpanel

Impact

We could create the entire funnel in Mixpanel, from someone visiting the payment page, to making the account, to sign up and going to welcome page and become a paying customer

⁠

Screenshot 2022-09-10 at 11.40.15 AM.png

⁠

Screenshot 2022-09-10 at 11.39.19 AM.png

⁠

This opens up a lot of opportunities for no-code tool developers to track the events happening in their no-code tool setup

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.