Bootstrapping In a Nutshell is a series of articles where you'll learn how to bootstrap a new online business from scratch through a real-world project.
Now that you've made your landing page with carrd.co, let's set up Google Analytics so you can follow your conversion rate over time.
Note that this article will be a little bit more technical than the others. Think of it as a tutorial. But don't worry, you'll be guided along the way with screenshots and good explanations!
Let's improve your landing page first
Go to your carrd.co dashboard and edit your website. You're going to add some controls in it. For now, when a user subscribes to your site, they get an ugly dialog box like this as a confirmation:
Not very friendly or informative. Let's replace it with this:
Why is it better? For several reasons:
- It tells your new user that they have to do some extra work to confirm their subscription (due to a great double opt-in feature, which I'll discuss below).
- It manages the fact that your email may have been dropped in the SPAM folder of the user's inbox.
- If the user marks your email as not-spam it should guarantee your next emails won't go to the SPAM folder again.
This subscription process might seem cumbersome for a new user. It's because we checked the double opt-in option when building our landing page in the previous article.
Double opt-in must be turned on to comply with laws in several countries. But even if we set legal questions aside, it has several advantages:
- It ensures you don't have bots that register to your website.
- It ensures that users don't make mistakes entering their email addresses. (If they do, they won't receive the confirmation email, and they'll try to register again with their correct email addresses — or so we hope.)
- Your email list stays clean, and this list of correct addresses prevents you from sending emails to non-existent addresses, an action that can get you flagged for spamming (since it looks like you're trying to guess what people's addresses are). This is critical. The last thing you want is to be blacklisted by email servers.
Remember to keep your message short and informative. Less is more, remember? Don't hesitate to copy my message as a base for your project.
Let's make your subscribe button do this!
Step 1 — Carrd.co email form setup
Edit your email button and set the On Completion to Redirect to a URL. Set the URL to #thankyou. That's an anchor.
Step 2 — Add controls
Create 3 new controls through the control command:
Add these:
- One control type header. Place it under your tagline, above your form.
- One control type section break. Name it exactly "thankyou", just like our previous anchor. Place it under your form. Add some text blocks to make the message you want that will appear after the user subscribes.
- One control type footer. Place it below your message.
It should looks like this:
How does it work? All the stuff that is above your header and below your footer will stay on the screen all the time. What is between the #thankyou control and the footer will replace what is between your header control and the #thankyou control.
Or, to put it more simply: your form will be replaced by your message.
Publish your changes and give it a try!
Step 3 — Get your form ID
Get the form ID by right-clicking on your live page. Click on show the source code. Search for "subscribe" and then identify the form ID. For me it's form01.
Step 4 — Add embedded JavaScript code
Let's add some JavaScript code to fire an event for Google Analytics. Add a new Embed item in your page:
It doesn't matter where it appears on the page. I put it below the footer. Now set the settings type to Code and set the Label to "Fire subscription for GA". (You can call it whatever you want.) Style: Hidden / Body End.
Now enter this code snippet in the code section:
<script>
// Gets a reference to the form element
var subscribeform = document.getElementById('form01');
// Adds a listener for the "submit" event.
subscribeform.addEventListener('submit', function(event) {
// Sends the event to Google Analytics
ga('send', 'event', 'New subscription', 'submit');
});
</script>
Don't forget the <script> tags! Also replace "form01" by the ID used on your website that we found on Step 3. This code will send the event "New subscription" to Google Analytics each time the button is clicked.
Configure Google Analytics
I suppose you already have a Google Analytics account. If you don't, create one.
Step 1 — Get your website tracking ID
Then add a new property with your website. You should get a new tracking ID. Copy it.
Step 2 — Set your tracking ID in carrd.co settings
Go back to carrd.co and your website and click the publish button. Then enter your Google Analytics tracking ID in the Advanced tab:
Step 3 — Publish!
Now Publish your website to get changes into account!
Step 4 — See your analytics moving in real time
Go back to Google Analytics, select the Real Time panel, use the Events sub-menu, select the tab "Events (Last 30 min)".
Go to your website and click on the subscribe button (you don't need to enter your email, it will fire an event anyway). You should see a pic on the right, and the event should appear in the list as you can see here:
It works!
Now we can improve this code by not firing the event when the email is empty.
Step 5 — Improve the script
For a second time, edit your website and change the JavaScript snippet of the embedded code to this one:
<script>
// Gets a reference to the form element and email
var subscribeform = document.getElementById('form01');
var emailform = document.getElementById('form01-email');
// Adds a listener for the "submit" event.
subscribeform.addEventListener('submit', function(event) {
// Sends the event to Google Analytics only if an email has been entered
if (emailform.value) {
ga('send', 'event', 'New subscription', 'submit');
}
});
</script>
Publish your changes.
Re-test your website and the real time panel in GA to check that the event is sent only when you enter an email address. It should work!
Step 6 — Set a goal for this event in GA
Let's configure a goal tied to this event now. In GA, go to the administration panel, and select Goals:
Create a new goal with the following settings:
- Goal setup: Template > Acquisition > Create an account. Click continue.
- Goal description: Name: Subscribed. Type: Event. Click continue.
- Goal details: Set Category > Equals To > "New subscription". The "New subscription" is the third parameter you put in the code ga('send', 'event', 'New subscription', 'submit');
- Click on Verify this Goal. You should have a conversion rate of more than 0.00%. If you don't, wait 24 hours and try this button again.
- Click on Save. Click on Done.
Step 7 — Watch your conversion rate!
Continue using your website and making some changes to it for several days. After a while you'll be able to see your conversion rate in the Conversions panel > Goals > Overview. Here is mine:
Congratulations! You linked your landing page to Google Analytics successfully!
In the next article we'll take a look at how to drive qualified traffic to your landing page to test your idea. Did you like this article? Do you have questions? Tell me in the comments!
ABOUT ME: I'm a 32 yo software engineer and entrepreneur. I use my free time to start new online businesses. Actually I'm learning front-end development while building an audience on twitter, follow me ;-).
NEXT ARTICLE: Ep #5: How to Drive Quality Traffic to Your Landing Page
FULL ARTICLES LIST
Ep #0: How to Select Your Next Business Idea
Ep #1: How to Select Your Domain Name for SEO
Ep #2: How to Validate Your Idea by Talking to Customers
Ep #3: How to Create Your Landing Page
Ep #4: How to Set Up Google Analytics For Your Landing Page