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

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



Softr.io is a no-code tool that is used to create web apps without coding and very heavily used for cases like marketplaces, membership forums, team wiki, client portal etc

Mixpanel is a product analytics platform to capture the events tracking and identify what users are doing in your application

How it started

Marketing Max 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

Challenge

There were 2 Challenges

1. 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
2. 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

1. Header code to initialise
2. 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

1. Welcome
2. 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

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