How To Know Nobody Wants Your Product — Save 6 Months Of Your Life With The Ultimate Tutorial For Lean Startups

Maxime Pico
Startup42 Stories
Published in
32 min readAug 23, 2016

--

Being the Managing Director of Startup42, I meet hundreds of early-stage entrepreneurs every year. They all have an idea. And in most cases it stays like that for a long time. It’s just an idea.
A few teams that are lucky to have a coder in their team, start building a product... But it always takes SO LONG.

Eventually the story ends 6 months later either out of frustration because the product is never launched (founders fight, or just lose motivation) or maybe because after the launch of the product, nothing happens.

Why? Because chances are that NOBODY WANTS YOUR PRODUCT.

Y U so mean?

Do you always have to wait (at least) 6 months to check whether your idea is worth something or not?

Luckily, the answer is NO.

You can use the same technique as Buffer used when they started:

Buffer Smoke Tested their way to the top in a really lean fashion and you are going to do the same

That’s right. Buffer did one of the leanest things you could do, and it was a total success. And here is a tutorial for everyone (techies and non-techies alike) to do it: it is fast, free (at least for 14 days), it uses the best Growth Hacking practices and it REQUIRES NO TECHNICAL KNOWLEDGE.

From Noob to Pro. That’s the plan

Here’s what Buffer did to test their idea and go from 0 to their first paying customer in 7 weeks (and now almost 1M$ revenue every month)

Joel Gascoigne the CEO of Buffer tells the story himself on this blogpost (you should read it!). Here’s the summary:

  1. They had the idea for Buffer
  2. They DID NOT start building Buffer, instead:
  3. They built a Landing Page page for the product — as if it already existed. On it there was a link to a pricing page. Once someone would click on it, they would tell them Buffer is not ready yet but that they could leave their email to get to know when it would be
  4. They spread the word about Buffer and made some early marketing and customer acquisition as if the product was ready
  5. They started to get a lot of clicks to check their pricing page
  6. They DID NOT start building Buffer, instead they pushed the test a little further:
  7. They added a pricing page with 3 plans. Once someone would click on one of the plans, they would tell them Buffer is not ready yet but that they could leave their email to get to know when it would be
  8. They continued to spread the word about Buffer and did some early marketing and customer acquisition as if the product was ready
  9. They started to have a lot of clicks on their paid plans
  10. They built Buffer
  11. They now make 1M$ in MRR

This is a perfect example of what we call a Smoke Test: you place a button or a call to action just to see if people would click on it to use the feature behind it.

Smoke your way up to the top

You can now do the same with your idea because…

We built a toolkit for everyone to do the same and here is the tutorial that goes with it

The beauty with this toolkit is that unless your product explodes in terms of traffic (good problem to have), it’ll cost you 0€ for 14 days, and very little after that!

Here is the list of tools you’ll be using:

  • Themecloud.io — an awesome WordPress hosting platform that requires no technical knowledge to make your site go live
  • The Growth Hack Theme — I specifically built a good looking WordPress theme with: a sleek one page, a sign up page and a thank you page that is really easy to modify. The Bento WordPress theme forms the base and then I hacked it a bit :)
  • Some WordPress plugins — Contact Form 7 and Contact Form DB to build a reliable contact form
  • Google Analytics — I guess everyone knows this free analytics tool by Google. Everyone knows it’s hard as hell when it’s the first time you use it, I promise to make it as clear as possible!
  • Hotjar — an analytics tool that does user recordings for free (up to a certain limit). It’s super useful for a more quantitative analysis
  • Google Builder/Shortener — a combination of two tools that will help you get an idea of the conversion rates of your different campaigns

And that’s only for the landing page and the analytics. At the end I’ll give you a few other tools to growth hack as well ;)

Someone’s happy

Here are examples of what others have created following this tutorial (and more specifically beta testing it, big thanks to them!!!):

And here’s the website I’ll be building during this tutorial: happyplants.themecloud.me

Step 1: It all begins with a (relevant) goal

I mean, what’s the point of all this. What are you trying to prove?

Well, probably that people would buy/download/subscribe to your product to justify the fact that it’s worth building it. So try to get as close to testing that as possible.

Let me illustrate:

  • You want to build an app
    One idea would be to build a page and say “we are building an app, give us your email to be informed as soon as it’s released!”. Wrong idea.
    That’s not nearly as good as saying: “Here’s this app, download it on the App Store” and once someone clicks on the button — which requires exactly the same level of interest as when you’ll actually have the app — tell them, “thank you for your interest we actually are in the process of building it, give us your email address so that we can let you know asap”
  • You want to build a marketplace and test your ability to gather a small number of “sellers”
    Don’t tell them “hey we are building this marketplace, give us your email to be warned as soon as it’s ready!”.
    Tell them “give us your mail and information on what you have to offer and we will find you a buyer”.
    This is soooo much better than the first possibility because not only you’ll have the contact info, but also you test how painful it is to give enough info to describe the offer, AND, next time you try to test the buyers side, you’ll have actual data to display and maybe start making connection between people!
  • You want to build a web-platform, like a SaaS tool for instance.
    Don’t say “we are building this tool, give us your email to be warned as soon as it’s released!”.
    Say “try it 14-days for free without giving any credit-card info, sign-in here!” and when they give you their signing-in info, you tell them your tool is broken and you’ll get back to them soon or you thank them and tell them you’re actually in the process of building it and that their action has accelerated that process

You think I’m going too far? Or you think you’ll lose some precious customers? Not only did Buffer do that but also Dropbox, Tim Ferris, and many more

Step 2: Build your Landing Page

Okay, so let’s say I want to build a SaaS platform that helps people remember when to water their plants by sending an SMS when needed. The service will cost 10€/month.

The product is not ready yet. But one thing is for sure: I’ll have to acquire my customers through a Landing Page. We might as well make it right now and see if it converts.

When it comes to building a landing page without technical skills (or simply without spending too much time!), a few alternatives come to mind: Wix, Unbounce, Squarespace, Instapage etc.
I was never satisfied with these because whenever you want to implement some analytics, you need to pay. So it’s either you test for free without any analytics and don’t learn anything, or you pay when you don’t know if your idea is good yet.

Fortunately I found an awesome alternative: using Themecloud and their awesome easy to deploy WordPress themes! There you can test your landing page for free for 14 days (and later for not much per month), in addition to the flexibility of a WordPress website and without the hassle of setting it up.

Yes yes, that’s awesome indeed

2.1 Signing up on Themecloud and launching your website

First, we will create a website on Themecloud based on the theme I created for our purpose. Follow this link: https://goo.gl/AYQqlk

You should end up on a page looking like this:

The most awesome theme ever!

There, click on “Create your website”:

Let’s get started!

This will open a block where they’ll ask you to “Login” or “Sign up”. Click on the “Sign up” page to create an account:

The first step of many stories, signing up :)

Do as they ask and enter a Username, an Email and a Password. Oh and no discrimination intended here, but you shouldn’t be able to sign up if you’re a robot (I hope they won’t kill me for that in a few years…).

This will lead you to a screen where we ask you a few parameters:

Many of these parameters can be changed later on
  • Name of your website — it’ll be a subdomain of Themecloud, meaning the name will look like “mytemporarycrazyname.themecloud.me”. Later on when you’ll want your own domain name like “myrealcrazyname.com” you will be able to do so and no one will be able to see the first name you had. So don’t put anything outrageous, but don’t spend ages to brainstorm either
  • Website Title — this is what will appear in google, when your page will be the answer to someone’s query. It’s the text in blue in this example:
In blue the website title, in green the corresponding URL, and in grey the meta description

I found an awesome Title emulator made by Moz, go on his page and scroll down to the tool to give it a try, here’s how it looks:

You can visualise your title as a Google result, so that you can realise whether it’s too long or not and what stands out
  • Website language — this is pretty straight forward
  • Do you want your website to be found on Google? — there you should tick the box so that if you want to try a bit of SEO later on, you’ll be able to

Finally, click on the “Next” button!
Be patient, the magic is going on so it can take a little time

wait until the loading is over…
Tadaaa… Your website is online!

Yay! The website is ready.

Let’s go on a magical adventure!

You should be on the settings page. Not much to do here for now. Just remember that if you want to delete your website or go back to an earlier version or change your domain name, you can do it here.

2.2 Checking the website and designing the result

So now let’s click on “Go to my website” just to check how it looks:

click here to get to your website, or open a new window and go to the address of your website

Aaaand:

And this is how it looks for now. Scroll down to see how it’s structured

Take a look at how it’s structured and compare it to your needs:

  1. The first part is made of a big title and a sub-title plus two buttons. In the background is a big inspiring shot
  2. Scrolling down there are different parts intended to describe a product. Think of what you like there and what you want to get rid of. Personally I really like the one where there is an image on the left and a text on the right (and the opposite). The rest has too much text I think
  3. Going even lower, there is another button. It’s really important to have two sets of button so I guess I’ll keep that one
  4. Finally there is a footer (the grey part at the bottom) with lots of stuff inside. Personally I don’t think it’s relevant because it gives opportunities for the visitor to leave. But if you like it you can keep it and personalise it

Next, I advise you to quickly sketch what your result will look like. Build it from the different sections you saw previously. Here is what I intend to do:

Clearly not art, but still enough to remember where I’m going :)

2.3 Modifying the Header of the Front Page

Now let’s modify the website to personalise it! Just go back on Themecloud and click on “Admin”:

By clicking there, you’ll end up on your website configuration page
And that’s where you end up! So many options…

Ok so this interface can seem a bit complicated when it’s the first time you use a WordPress theme. But we are actually going to use just a small part of it and, as usual, I’ll explain everything!

To start modifying the Front Page click on “Pages” on the left:

Then find the page called “This is your claim. — Front Page” in the list and, click on it to be able to configure it:

Ok so now, let’s customise it to our needs. First, change the main title of the page that says “THIS IS YOUR CLAIM” to the title of your choice. In our case “FEEL BETTER BY LIVING GREEN”.

Enter your title in that field

Next step is to change the subtitle from “This is your value proposition
(find the tutorial on how to modify this page, here)” to the subtitle of your choice. In our case “remember to water your plants by receiving a daily sms”. For that you need to scroll down and find the Subtitle field and replace it by the text of your choice:

Let’s change the subtitle

Now we are going to change the background picture.

Continue to scroll a bit down and locate the “Header image” section. The click on “Add or Upload File”.

Let’s change the background picture

In the next screen upload the picture of your choice (I like to use the website pexels.com or photopin.com to find pictures).

Drag and drop your files or simply click on the “Select Files” button
Once the image is uploaded and selected (represented by a blue box), click on “Use this file”

Awesome! Now save your changes by clicking on the “Update” button on the top right of the page:

ALWAYS SAVE YOUR CHANGES

2.4 Modifying the heart of the page

The next thing to change is which sections of the main page we keep and which section we delete.

2.4.1 Going to the live editor

In order to do so, scroll back to the top of the page and take a look at the page editor:

This central part made of blocks is the page editor

Now let’s change it in the “Live Editor” mode. Click on the button that says “Live Editor”:

The live editor is easy to work with
On the left, the structure of the website — On the right the changes made to the website in live

Whatever changes we make on the left, we can see it live on the right.

2.4.2 Deleting sections in the live editor

As I said before, I just want to keep the image+text section. So I’m going to delete the 3-text-column section by first hovering on the setting icon and then clicking on “Delete Row”:

DELETE DELETE DELTE

But of course you can also keep them. I’ll show you how to edit a section really soon.

Now I’ll do the same for all the other sections I didn’t want to keep. Here is the result:

Aaaah feels better

2.4.3 Duplicating sections in the live editor

In case you want to duplicate a section, here’s how to do it:

For when you make a mistake and delete too many sections!

2.4.4 Editing sections in the Live Editor

It starts to take a shape that we would like, now let’s see how we edit a section. For that, you simply need to click on the block you want to change:

Editing this box will change the text on the right

It’ll then open a panel where you’ll be able to change the image or the text you want in which you just change the Title and the Content:

Easy to use

Click on “Done” in the bottom right. Here is the result:

I repeated the same action for the 3 text blocks

Now let’s do the same for the images:

Opening the corresponding panel
Clicking on “Choose Image” and ending up on a screen looking like previously

Don’t hesitate to play with the “Image size” and the “Image Alignement” parameters. Here’s how it looks for me:

I like to create my designs with Sketch

Final step on this screen, change the second-button text:

I like to add a “now” here and there to create the urgency

2.5 Getting rid of the footer, the logo, and doing a little tweaking

We are getting closer to what we want but the footer is still there, the first set of buttons do not have the right text, the subtitle is hard to read and finally there is a STARTUP42 logo on the top left:

A few more things to change

Go back to the previous screen by pressing the “Done” button on the top left:

ALWAYS PRESS THE BLUE BUTTON WHEN DONE — Seriously

2.5.1 Changing the color of the subtitle

Let’s start by changing the color of the Subtitle. In our case, we will switch it to white, it should be easier to read:

A bit better. It’s not perfect though, maybe I should find another picture

2.5.2 Changing the text of the Header buttons

Next step, changing the text of the first set of buttons:

Don’t hesitate to vary the copy of your call to actions

2.5.3 Tuning the SEO settings

Since we are already there, we will also tune the SEO setting. Scroll a bit up and go to the “SEO Settings” section.

These two blocks are important for Search Engines

When you’ll modify the title and the description it’ll modify what will appear in Google (I know we already did that, but there we have to do it for this specific page and you can also change the text in grey) as well as what will appear in the tab:

Remember, it’s about making this look good
You can also modify that

IMPORTANT: we modified MANY things since the step 2.4 but we did not take the time to actually save and publish them. If you don’t do it, and directly go to the next step, everything will be lost and you’ll go back to step 2.4. So please, please, click on “Update” before you go and do the next step:

And I’m talking from experience!

2.5.4 Getting rid of the Footer Widgets

Now let’s hide the widgets in the footer. It is the section in light-grey that you can see in the image above. For that we will need to open the customisation panel, go to appearance — then customize:

How to get to the customisation panel

From there, click on the “Widgets” panel:

Now we explore the Widgets settings

And proceed to the footer section:

Almost there…

Finally, open each panel and click on “Remove”:

2.5.5 Removing the “STARUTP42” logo in the header

Now it’s looking clean! The only thing left is removing the STARTUP42 logo on the top left, this one:

Really annoying logo :p

For that, we will have to go back to the backend. But first, click on “Save & Publish”!!!:

I will warn you every time!

Now that our work is saved, and published, you can finally click on the cross on the top left to go back to the backend :):

Yay :)

And now we will go to the “Theme Options” in the “Appearance” panel:

This screen is quite important!

To remove the “STARTUP42” logo, you just have to delete the text inside the “logo” field (of course if you want to upload your own logo, go for it!):

Aaaand it’s cleaned!

And if you want to change the “Favicon”, it’s the field right under! The favicon is the little image (here in red) you see at the top of the tab:

When you’re done, don’t forget to press save at the bottom of the page, otherwise…

Always SAVE CHANGES

2.6 Modifying the form and the signup page

Alright! That’s a big chunk done! The front page is looking good! However, when we click on “Try it free” we end up on a sign up page we need to modify:

Just needs a bit of personalisation

So the next step will be about… Modifying that signup page! (Much suspense, such wow).

2.6.1 Modifying the form

In order to modify the form that appears on the sign up page you need to go to the “Contact” panel:

I think by know you should know how to find the screens. But just in case…

We will modify the default contact form. Just click on the “Contact form 1” link:

Hey, who left that here? Well, I might as well use it…

Ok so you will end up on a screen looking like this:

Yuk! I think I puked. Good that I took my towel.

The first field on that page is the title of the form. We don’t really care about the title because it won’t be displayed on the website. It’s just for you to sort them out.

The second important information is the text highlighted in blue. In my case “[contact-form-7 id=”3009" title=”Contact form 1"]”. This is what is called a shortcode. Whenever you’ll paste that shortcode on a page of your WordPress website, the corresponding form will be displayed instead.

It means that this code is already inserted somewhere in our sign up page.

Then there are four different Tabs. We won’t need to check the “Messages” and the “Additional Settings” one because the default parameters are often good enough. So don’t worry with it.

2.6.2 Editing or adding form fields

To edit what information is required in our form, we need to edit the “Form” tab. As you can see, there are different pairs of lines, made of text and code. Each pair of line begins and ends by a label tag the thing looking like that “<label>” or that “</label>”. They represent a field and its description (what the user will see to explain what he should type in).

On the first line, just after the opening label tag “<label>” is the description of the field. It’s what the user will read to understand what to type in the field.

Is this a field for ants?!

You can modify this text as you wish.

In the second line, before the closing label-tag “</label>” is the code for the field. The first part represents the type of data you expect. For instance when it’s written “[text* your-name]” it means we expect text information. The star “*” indicates that the field is required. And the text “your-name” is representing what the user will input in the field. When we will want to use this information, we will use that variable.

You don’t need to do to this step, but just in case, if we want to create a new field asking for a not required telephone number, here is how we would do:

Don’t forget the label tags

As usual, end up by clicking on the save button :) This time at the bottom of the page:

I swear if someone comments “Y U Didn’t warn us 2 save???” I’ll kill him ❤

2.6.3 Modifying the form settings

This step was, I guess, the most complicated of the tutorial. Luckily enough, if you do not manage to do it properly, the second plugin we installed should avoid most of the damages :)

Now let’s go to the “Mail” tab to decide how we want to receive the submissions made through the form:

Yup. WordPress is a magical world full of secret hidings and special settings and beautiful… poneys.

On this tab, you are able to change the way the email corresponding to each submission will look like.

The most important field is the “To” field. There you should input the email address you want to receive these email at:

It’s a field asking you mail in a form to setup a form asking emails… #inception

Note: maxime@startup42.org is my email, don’t hesitate to drop me a line if you want to have a 1h meeting with me and get challenged on your startup

Another thing you want to modify, if you added a new field, is the “Message Body” which is the content of the email you’ll receive. As you can see the names of the field variables now appear on top of this tab. And they are all used in the “Message Body” except the one you created (if you did create one).

This means that, for now, we won’t see what the person typed in this new field. In my previous example it would have been the telephone number. To fix that, we need to place that variable in the mail. Here’s how this process looks like:

I copy/pasted the code

Now as usual, don’t forget to save :)

2.6.4 Modifying the Signup Page

Now that we created and modified our form, we are going to modify the page it’s inserted in.

First, SAVE YOUR WORK, and then click on the “Page” panel:

Don’t forget to save your work first!

And then click on “Sign up to Start [value prop] Now!”:

Easy to find :)

Modify the title of this page:

I added a bit of price feeling to make it more realistic

The URL of the page is always in blue under the title:

Easy to find!

As you can see if you follow that URL (after clicking on the blue Update button on the right), there is also a subtitle we would like to change:

It would feel weird for a customer to see that…

For that, click on the first “Text” box in the Editor Area (Note: the second text-box is where “short-code” of the form is inserted):

You could also use the Live Editor if you want to

Edit the title of this box to change the text on the page:

Or just do like me and delete it using the “Delete” link on the bottom left. I just like it light.

And finally click on “Update”:

It’s the same as the Save button. ALWAYS CLICK IT

This is how your page should look like now:

Yay! \o/
BOOM!

2.7 Modifying the “thank you” page… or close

Now to make it really analytics oriented (which was the goal of all that!) we also have a third page. It’s a “Thank you” page where people will end up once they click on “GET STARTED”. It’ll help us count the number of people who submitted a form vs number of people who saw it in an easy way.

So let’s go again in the “Pages” panel and click on the “Thank you!” page. You can personalise the page and you can choose between two main strategies:

  • DENY: You fake it all the way and change your page to an error page and pretend this wasn’t supposed to happen
  • APOLOGIZE: You admit that this was a test and thank them for taking part in it. And tell them you’ll let them know as soon as you service is working. And add whatever you feel like adding. This is the current strategy of the theme

I’ll choose the first strategy and show you the result.

I lied AND I denied. What an horrible person I’m making!

Let’s start by checking the page as it is. Follow the URL of the page (right under the title field as usual):

They say repetition is the art of teaching so…

And here is what it’s looking like:

It’s a cheerful page for sure!

On the left there is a Gif. And on the right there is a title, a little text, and a Invitation to share.

If you want to personalise all that, I recommend you to go in the “Live Editor”:

The way I showed you with the Front Page can also work here

This is where you should end up:

You can see the, now familiae, boxes on the left

2.7.1 Changing the Gif

If you want to modify the gif click on the “Image box”:

I mean… this gif won’t fit for an error page!

In this new screen, the “Image URL” field is the one you want to modify to change the image:

But where do I find a URL like that?!

The way I choose my Gif is the following:

  1. I go on http://giphy.com/
  2. I search for the Gif I want and click on it
  3. When I’m on the page of the Gif, I right-click on it and “Open Image in New Tab”
It’s the first option in my case when I right-click the Gif

Finally I copy the URL of this “new tab”. That’s the one I’ll paste in the “Image URL” field.

In my case the URL looks like that: https://media.giphy.com/media/3o6gDQMcjAvBzz9rq0/giphy.gif

And then click on “Done”:

Update buttons, Save Buttons, Done buttons, all the blue buttons are nice to click on!

2.7.2 Modifying the Text

Now let’s modify the text to make it look like an error page:

As usual, click the corresponding text box

This will open the content of the text box, here’s how it looks:

Everything is in the text box

In this template, in order to make the title stand out, instead of using the “Title” field we put the “YOU ROCK” between two “h1” labels. If you want to modify the title, make sure you keep these labels. Here’s how I’m editing this box:

Wow, a stream of loading arrows!!!

2.7.3 Updating the Share buttons

Finally you can edit the “Share Buttons” by clicking on its box. Here’s the screen you’ll see:

Nice and handy!

There are three fields:

  • the “Title” field represents the text that will be displayed over the share buttons
  • the “URL” field is the page that will be shared when someone clicks on the buttons. You should replace it by the URL of your front page. In my case it’s “htttp://happyplants.themecloud.me”
  • the “Page Title” field is the default message the post will contain once it’s shared, it’s this part:
For some reasons it doesn’t work on Facebook but it doesn’t really matter

In my scenario, where the customer ends up on an error page, it doesn’t make sense to invite him to share. So I’ll just delete that box:

I like to delete things it seems… :D

Don’t forget to click on “Done” AND then on “Update”!

Click ALL THE BLUE BUTTONS!!

This is what my page ends up looking like:

You can alternatively use Error 418 which is the code for the “I’m a teapot” error. True story

2.8 Testing the whole funnel :)

Okay so let’s test all that! Here’s how it looks:

IT’S ALIVE, OH IT’S ALIVE, IT’S ALIVE, IT’S ALIVE IT’S ALIVE IT’S ALIIIIIVE

Clearly it’s time to celebrate!

You’re a warrior

2.8.1 Verifying that it actually worked!

Wait a minute. It’s actually far from being over!

We don’t have the analytics ready yet, and we haven’t checked that we receive the submissions yet!

Sometimes the submissions can take a long time to arrive in your mailbox. And sometimes they simply never arrive… That’s why I like to check that they are in “Contact Form DB”.

In order to check the submissions, we just need to click on the “Contact Form DB” Panel and the results should appear:

So much tension… What will happen next???
And there it is! The email address of our little test!!!

Aaaaah it feels great. A functional Landing Page! Not everyone can do that, but you can ;)

Smart is the new Sexy

Step 3: Setting up Hotjar for your Landing Page

However, for now, you’re not a Growth Hacker.

Indeed, if you leave your Landing Page like that and start to work on acquiring users, you’ll have absolutely no idea what to fix, what to optimise on the website and where your visitors come from!

If you want to be really smart, you need some analytics. And that’s really the key.

So let’s start by installing “Hotjar” this will make your life easier. It’ll help us get user recordings.

User recordings are small videos of how the users use your website. You can see where they place their mouse (and thus their eyes, it’s crazy how much we look with our mouse!!!), what they read, what they don’t read, what they read but don’t understand, where they search for things and etc.

You’ll also be able to have Heatmaps, conversion funnels, form analysis, and feedback polls. You’ll see, it’s pretty straight forward to use.

And with these insights you’ll know exactly how to rebuild you landing page if needed. Here is an example of a user recording:

A recording of a Hotjar user recording of a user using Hotjar #inception

3.1 Signing up on Hotjar

So go to hotjar.com and sign up. Nothing much to say here, it’s a classic signup (you even know how to build one!).

When they ask you what you want to setup, just say ok to everything, except maybe the feedback collection if you don’t want to (personally, I think it’s a distraction on a small website like the ones we are building).

Now you should end up on a screen like that:

It’s looking a bit better than the usual WordPress screen I have to admit

3.2 Installing the tracking code

We have to copy the tracking code and install it on our website. So first step, copy the tracking code by clicking on the dark “copy to clipboard” button:

The “Copy to clipboard” buttons are awesome for lazy people like me. Love them.

Then let’s meet on the “Appearance” panel of our website and more specifically on the “Theme Options” section:

This looks really easy for now…

From there, click on the “ANALYTICS CODE” tab:

Yeah… keep it coming…

Paste the code inside the box there and… Save Changes!:

What? That’s it? It was THAT easy to setup a good analytics tool?!

Now go back to Hotjar, click on the big green button that says “I have installed the tracking code” and proceed to verify your website.

3.3 Setting up Hotjar

Now that the Hotjar traking code is installed, let’s activate the surveys functionality and the funnel. For that, simply click on the “Funnels” panel:

Easy to find features

Click on the big green button that says “New funnel”. Enter a name for the funnel, like “Signup funnel”. Then let’s input the steps. Our funnel begins with the Front Page at our main URL, so let’s fill step one with that information:

Just follow the instructions

And let’s do the same for the second page, our signup page, and the third page, our “thank you” page by adding another step. Here how it looks like in the end:

Looking good

Validate the process by clicking on the green button at the bottom “Create Funnel”. Once this is done, Hotjar will generate your funnel.

Sadly, until at least one person goes to your website, there will be nothing to see there.

Let’s jump to the next cool feature and create the Form analysis. For that, go on the “Forms” panel and click “New Form”. Insert a name for your form and insert the URL where the form is. In my case it looks like that:

Again an easy process

Once you’ve input the relevant information, click on the “Load Forms On Page” and then… Tadaa! The detected form fields will automatically appear on the right. Once that’s done click on “Create Form” at the bottom:

Man that was fast!

Hotjar is all set!

Far less than 25% of the founders I meet (technical or not) follow this best practice of installing (right away) a critical analytics tool like Hotjar. And now you’re part of that cool league of smart people. So I think it’s time for…

Another celebration:

Now we celebrate. Later we will swipe the floor…

Note: Unfortunately, any analytics tool is useless until people visit your website. But as soon as you start your acquisition, your heart will (hopefully) be full of joy when you go back to Hotjar!

Step 4: Setting up Google Analytics for your Landing Page

Ok so now we will setup Google Analytics. We will limit ourselves to the what I think the most important in our case: getting to know which type of visitors converts the best, depending upon where they come from. So that you’ll know which acquisition channel works best.

This process is really important because, this way, you’ll be able to stop wasting time on the channels that don’t work, double down on the ones that work and focus on scaling them. And that’s exactly how Growth Hackers work.

4.1 Signing up for Google Analytics

In order to setup Google Analytics, begin by reaching this address: https://analytics.google.com and create a new account.

They will ask you a few questions, but nothing really hard :) In my case (I’m sorry it’s in french and I couldn’t easily switch it to english), here’s how it looks like:

What category are you in??? It’s always a hard one to answer!
Check, check, check, all the boxes

4.2 Installing the tracking code on your website

Once it’s configured, you’ll end up on a page where they’ll give you your “Website tracking” code. It’s the same as with Hotjar. You copy it:

Copy that code

And you paste it right under the Hotjar code in the “ANALYTICS CODE” section of the “Theme Options” in the “Appearance” panel. And don’t forget to save!

And Paste it there

4.3 Setting up Goals on Google Analytics

Once the changes have been saved, we will have to setup a conversion goal on Google Analytics.

In order to do that, we will go back to Google Analytics and go to the root of the “Admin” tab:

Google Analytics can be super confusing. But it’s also super powerful!

From there, click on “Goals” in the third column:

Let’s set our goals!

Let’s create a new conversion goal. Just click on “NEW GOAL”:

Follow the RED button

In the settings of the new goal, select the “Create an Account” type under the “ACQUISITION” category and click on continue:

Yes, our goal is to Acquire customers!!

Next, give it the name of your choice and make it a “Destination” type. Then click on continue:

Desssstination Unknown

Now in the destination field, just put the last part of your “thank you” URL page. In the case of my example, the url of my thank you page is: “happyplants.themecloud.me/thank-you/” so I’ll simply put “/thank-you” there.

Then activate the “Funnel” button. In the same fashion as on Hotjar, input the different steps of your funnel there. For the Front Page, the “Screen/Page” field will be “/” and, in my case, for the Sign up page it’ll be “/sign-up”.

Also activate the “Required” option since there shouldn’t be any other option than going through these two steps first.

Here’s How it looks like for me:

If you try to verify the goal it won’t work because your website was just created so no actions could have been recorded

Ok so now Google Analytics is setup :)

4.4 Where to find the answers to life, the universe and everything in Google Analytics?

Page 42.
More seriously we will see where to look in order to analyse the data

As it is a bit more complicated than Hotjar. I’ll show you where you’ll be able to find the results of this goal/funnel:

First, go on the “REPORTING” tab:

Type caption for image (optional)

Then scroll down the left panel and find the “Conversions” section, then the “Goals” subsection and finally go to the “Overview” sub-subsection:

It feels like going deep in the amazon rainforest… Don’t forget your towel.

Once you’re there, you’ll get plenty of information to work with. Also check the “Goal Flow” sub-sub-section because that’s where you’ll see the detail of where the users that convert come from.

Step 5: How to use Google Builder & Shortener to get the most out of Google Analytics

In particular. If you want to have enough details to work with, I STRONGLY advise you to work with Google Url Builder and Google Url Shortener for all the links you’ll share during your campaigns!

Plus, it’s super easy to make it work!

5.1 Using Google Builder

Let’s assume that you want to share the link leading to your website on Facebook in an ad. In the ad settings, instead of sharing the classic address “happyplants.themecloud.me” what you should do is:

Go to Google Url Builder and answer the questions of the form you’ll find there. Here’s how it looks like for example:

Yes it really is a form
No it’s not that long, I’m just bad at cropping

Click on “GENERATE URL” and copy the link.

5.2 Using Google Shortener

Now go to Google Url Shortener at goo.gl.

There paste your link and generate a shortened URL. Use that new url! In my case it looks like that http://goo.gl/BQzlws :)

Why would we do that? Well two reasons:

  1. Creating a specific campaign URL in Google URL Builder will make it appear as an identified Source in the “Goal Flow” section of Google Analytics we talked about earlier. This means that you’ll be able to differentiate between traffic that comes from an ad that you placed on Facebook or traffic that comes from a post on your page for instance
  2. Shortening the link will make it easier to analyse the demography which clicked on the link because a mini report will be available for each link you create

It’s not very hard to inculcate this habit, so do it to benefit yourself. Please :)

Hey.

You know what?

It’s all good.

WE FINISHED THE TUTORIAL.

Now it’s time for the best celebration ever because you’re ready to focus on the acquisition in a real Growth Hacking fashion:

I was also happy this happy when I finished to write this tutorial
I want to high five with you

Bonus: the toolbox for a quick kickstart in acquisition

Unfortunately, I won’t make a tutorial for that. I’ll just give you the list of stuff I like to use: My “kickstart your acquisition” toolbox.

I’ll create an article on the topic later on :)

Conclusion

You can now go and honestly test any idea super quickly.

The only problem with that technique is that you’ll have to drive traffic to your website.

But that’s a super good problem to work on since it’ll also be there when you’ll have a product. And it’ll even be there if you pivot on the same customer segment!

Also, if you want to turn your Themecloud account into a paid account, use this code: “growthhackr” to get 60% off on any annual plans!

If you want to go even further and learn from me how to further test an idea (acquisition included), I just launched a course for intrapreneurs in Paris. Let’s meet here. And if you’re a startup (even not in Paris) don’t hesitate to apply to Startup42!

Recommend this article if you liked it and follow me on Medium to read more awesome stories about entrepreneurship, growth hacking, lean startup and hackers (it’ll encourage me to make more of them!).
And of course check out
Startup42, the best early-stage tech startups accelerator in Paris.

NB: I had the idea for this tutorial during a Growth Hacking Bootcamp at Sup de Pub co-organised with the very awesome Benjamin Marchand Lenoir. Thank you Benjamin!

NB2: Thank you to the Themecloud team for providing this awesome discount code to our community!

NB3: Thanks to the hundreds of people who volunteered to beta test this tutorial and gave invaluable insights that allowed it to be so good :)

Cover photo credit: New York National Guard via photopin (license)

Gifs credits: I found everything on Giphy!

--

--