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 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 - 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 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
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
Screenshot 2022-09-10 at 3.28.52 PM.png


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.
Screenshot 2022-09-10 at 3.38.01 PM.png

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 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
Screenshot 2022-09-10 at 5.29.43 PM.png
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.