Superwall: Remote Paywall Configuration on iOS
Learn how to integrate and use Superwall to remotely configure and control your paywall to monetize your app. By Yusuf Tör.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Superwall: Remote Paywall Configuration on iOS
25 mins
- Getting Started
- Exploring the Dashboard
- General Tab
- Layout Tab
- Paywall Preview Section
- Element Configuration Section
- Understanding Campaigns
- Events
- Rules
- Paywalls
- Integrating the Superwall SDK
- Adding the Superwall iOS SDK
- Initializing the SDK
- Presenting the Paywall
- Making Your Paywall Gated
- Adding Products to Your Paywall
- Adjusting Paywall Design
- Testing Paywall Variants
- Analyzing Paywall Performance
- Where to Go From Here?
Making Your Paywall Gated
Open the Paywall Editor for the Example Paywall on the Superwall dashboard.
In the General tab, scroll down to Settings and change Feature Gating to Gated:
Click the Save button in the top right.
Now build and run your app. Tap the Get Inspired button to launch your paywall and then close it again by tapping on the right button in the top right. When the paywall closes, it won’t navigate to your quotes!
Adding Products to Your Paywall
Back in the Paywall Editor, create your first product by clicking the + Create Product button in the Products section:
In the popup, set the Product Identifier to gm_2099_1y, Trial to 1 week, Price to 20.99 and Period to Year:
Save the paywall, then build and run your app.
Present the paywall and tap the Purchase Primary button. You’ll see it presents the purchase sheet for you to purchase the product:
Tap Subscribe and purchase the product. After purchasing the paywall will dismiss and you’ll navigate through to the MotivationView. Delete the app to reset your subscription status for the purposes of this tutorial.
This is now a fully functioning paywall! Open the Superwall dashboard to confirm all onboarding steps checked off:
All that’s left is to alter the paywall’s design to be better suited for your app.
Adjusting Paywall Design
Open the Paywall Editor and click the Layout tab.
For simplicity’s sake, we’ll only keep a few sections and delete the others that we don’t want. In a production-ready paywall, you’ll want to experiment with the length of your paywall. Usually, longer paywalls perform better. This is because purchasing is an emotional decision so you’ll want to give your users enough information to persuade them that your product is deserving of a small portion of their children’s inheritance.
Click the trash can icon next to the Section element underneath the Subheading element in the Main Content list:
Click Delete in the popup that appears. Repeat these steps and delete the next two Sections underneath Subheading. Finally, scroll down and delete the very last Section in the Main Content list. You should end up with 4 sections and a navbar:
In the navbar, click the left button, and set its Display to None:
Repeat this for the Title navbar element. Set the text of the right button to Exit.
Select the image element and click the Upload button. Choose the image named paywall-image.png from your tutorial materials. Then change Top Padding to 40px:
Replace the main heading text with:
Unlock Pro
Replace its subtitle text with:
with a {{ primary.trialPeriodText }} free trial
This references the trial period of your primary product within the text.
Set the bullet points’ heading’s Display to None. Then for each bullet point title, hide it’s subtext in the same way.
Replace each bullet point text such that your list looks like this:
- Unlimited quotes
- Unlimited motivation
- Maximum amount of gains
- Cancel anytime in seconds
Then replace the title above the review section with:
Highly rated
For the purchase button, replace the text with Continue in its default state and Try now in its free trial state.
Replace the primary selected description with:
Only {{ primary.price }} per {{ primary.period }}
Click the Save button, then build and run your app to see your new paywall in action! It should look like this:
Testing Paywall Variants
Say you’ve launched your app on the App Store but have a feeling the title isn’t really selling the product. You’d like to test a paywall with different copy and see if it makes more sales. With Superwall, you can run multiple paywalls at the same time.
Open the Superwall dashboard. Under Paywalls, hover over your paywall’s name and click copy:
Click Duplicate to redirect to the paywall editor for the duplicate paywall.
Click the title in the paywall Unlock Pro and replace it with:
Unlock your full potential. Go Pro.
Then, click the title of the paywall to change it from Example Paywall (copy) to:
Example Paywall | Title Change
Click Save and head back to the dashboard. Under Campaigns, click Example Campaign and add a new paywall variant to your rule by clicking + Add Paywall:
Select your paywall Example Paywall | Title Change from the drop down and click Create:
Then, above your newly added paywall, click 0% of users, set both paywall values to 50 and click the check mark to confirm your new traffic distribution:
You now have an A/B test running two paywalls at the same time, with a 50/50 traffic split between them. Your original paywall is the control and the new one is a variation or variant.
Analyzing Paywall Performance
How do you know which is the winning paywall in an A/B test? What should you do after you have a clear winner? What performance indicators should you measure? All very important questions!
After data starts coming in for your paywalls, you can view metrics underneath each campaign rule like this:
These default to data retrieved in the last 24 hours but you can change this to any time range in the top right corner of the campaign page:
You can use this data to analyze your paywalls’ performance.
A company called CXL have created a calculator that will help you take your results from Superwall and figure out whether they are statistically significant. Open their calculator:
As an example, let’s say you’ve been running a test with the above paywalls for 30 days. In the campaign, you’ve seen that there have been 300 opens for each paywall since you set up the test. It turns out you’ve had 20 conversions, or purchases, from the control and 40 conversions from the variation. All you need to do is input this data into the AB+ Test Calculator.
In the Test duration input field, enter 30.
On the AB+ test calculator website, input 300 in the Users or sessions fields for both the control and variation. Then input 20 and 40 in the Conversions fields for the control and the variation respectively.
If you had more paywall variations you could add another by clicking Add Variant. Leave Step 3 of the calculator as it is. This is where you’d adjust the confidence level of your experiment if you wanted to:
Finally, the results will be automatically calculated for you using Bayesian statistics. This answers the question “How likely is it that the variation(s) will be better than the control?”, or vice versa. It outputs two graphs. The first gives the probability of each paywall variation being the winner and the second indicates the probability of a paywall’s conversion rate:
As you can see, the variation has a 100% chance of being the winner compared to the control.
Open the campaign on the Superwall dashboard and remove the losing paywall by clicking the x in the corner:
Confirm the removal of the paywall:
This will make it reset the paywall assignment for users assigned to that paywall. Then, set 100% of traffic to the new paywall:
Given the example data above, you can see that you’ve doubled your income just from running an experiment. But it’s not over! After this, you’d want to try a new experiment such as changing the positioning, design, or pricing of the paywall.