Timothy E. Johansson

http://codepen.io/userapp/full/DbhnB

Today's growth hack is blogging, and my first article is about how to add user authentication to an AngularJS app with UserApp. With blogging, I mean articles about, or relevant to UserApp. The main goal is to write valuable content that will get indexed by search engines and then drive relevant traffic. So, my growth hack blogging doesn't count.

I expect this to drive highly relevant traffic through search engines, and I will also link to it from tweets and ads. I'm using Google Analytics to track how many visitors the article gets.

To compensate for this short post, I will share with you some interesting numbers on hack #30. For about 5 days ago, I started an A/B split test between having the name as a field on the sign-up form or not. And here's the results so far.

With the name field:

Without the name field:

AngularJS is an amazing framework, and it's very easy to use. But adding user authentication to an AngularJS app is not that simple. Many single-page apps need protected routes, auto redirect on login/logout, store the session in a cookie, etc. There's a lot of stuff to keep track on. But the AngularJS module for UserApp takes care of all this.

UserApp is a cloud-based user management API that relieves you from the struggles of writing code for login, sign-up, user storage, invoicing, and more.

In this tutorial you will learn how easy it is to add a full-blown user authentication to your AngularJS web app. This tutorial is also available as a course on Codecademy.

Step 1: Create a UserApp account

Before we get started, you'll need to sign up for a UserApp account. So head to the sign-up page) and get your account now!

Step 2: Include the UserApp JavaScript library and the AngularJS module

In index.html:

<script src="https://app.userapp.io/js/userapp.client.js"></script> <script src="https://rawgithub.com/userapp-io/userapp-angular/master/angularjs.userapp.js"></script>

Step 3: Inject the UserApp module and service in app.js

Add 'UserApp' to the list of services, filters and directives that you include in your app:

angular.module('myApp', ['UserApp'])

In the run() function, inject the user service as an argument:

app.run(function($rootScope, user) { ... });

Step 4: Configure the service in app.js

.run(function($rootScope, user) { user.init({ appId: 'YOUR_APP_ID' }); });

Replace YOUR_APP_ID with your UserApp App Id.

Step 5: Login and signup routes

Create routes + templates for login and signup, and use the directives to connect them to UserApp (examples: login.html and signup.html):

Add public: true on the routes you want to make public (i.e. /login and /signup). Add login: true on the login route. The otherwise() route should be set to the route that should be shown after login.

$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true}); $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true}); $routeProvider.otherwise({redirectTo: '/home'});

Step 6: Add a log out link

<a href="#" ua-logout>Log Out</a>

When clicked, this will end the session and redirect to the login route.

Step 7: Hide elements

Hide elements that should only be visible when logged in:

<div ng-show="user.authorized">Welcome!</div>

Show elements based on which permissions or features the logged in user has:

<div ua-has-permission="permission1 permission2">You have all the required permissions!</div> <div ua-has-feature="feature1">You have enabled feature 1</div>

Step 8: The user profile

Use the user object to access properties on the logged in user:

<span>{{ user.first_name }}</span>

That's basically it! To authenticate to your back-end services, just get the session token with user.token() and send it with your AJAX requests. At the back-end, validate the token using the UserApp API (user.get or token.heartbeat).

Then log in to the UserApp Dashboard to set up permissions, price lists, and manage your users.

Quora is a place where people can ask and answer questions on the Internet.

Quora is your best source of knowledge. Ask any question, get real answers from people with first hand experience, and blog about what you know.

I've read many times that Quora is a great place to practice some growth hacking, even though I've never really tried it myself. But that changed today, when Osman Sheikh emailed me with the recommendation to try answering some questions there. He had even answered one for me, and included a list of other relevant questions! Just awesome!

Here's the question that he answered for me: https://www.quora.com/Web-Applications/Is-there-an-app-that-will-handle-user-authentication-safely

And here's another one, that I answered: http://www.quora.com/Web-Applications/How-do-I-manage-user-authentication-so-that-I-can-scale-my-application-at-any-time

When there's time, I will answer more questions - not just on Quora, but also on Stack Overflow (see day 31). One thing to keep in mind though, is to actually provide real value, and not just spamming links ;)

I expect this to drive both awareness and traffic.

What's your experiences with Quora?

Today was the first time ever we spent any money on marketing! And we chose Twitter. Maybe it's too early or maybe it's not, but I wanted to try the effect of marketing a personal tweet.

Some background: On day 25 I created an AngularJS module that would make it a lot easier to add user authentication to an app with UserApp. I was quite impressed by the module myself, and so appeared another user to be:

:') Tweets like this makes me happy! Anyways, I wanted to see if there was more of this love out there.

I decided to use Twitter because I think that they have the right audience for us. Facebook is too personal, LinkedIn is too corporate, while Twitter seems full of creative people looking for new interesting things. Google Ads would probably also work, but then the ads wouldn't be subject for retweeting - which is partly what I'm after.

I also decided to place the ads from my own account to give them a more personal touch. Later, I will try to place the same ads from our UserApp account and see if it has any effect on the results.

I created three different tweets: two that links to the GitHub repo (with different copies), and another one that links to the Codecademy course. All of them are targeting the keyword "angularjs".

I could create a landing page to link from the ads, but as I said, I wanted the personal touch, and who links/retweets a landing page? I will save that for Google Ads. What I would like to try is to link to a blog article instead.

I've set the maximum budget to $30, and the same as my daily budget. My maximum bid is $0.60 per engagement. It will be interesting to see how much love this campaign will generate ;)

Any feedback? Have you tried advertising on Twitter? If so, what approach did you use?

Today I got a tip from Sean Ellis about doing a survey for our customers where we ask them a set of questions regarding UserApp as a product. For example, how they found out about UserApp, what the main benefits are, etc.

I created the survey with Survey.io, which is totally free. All I had to do was to enter the product name, url, and type, and it was ready. It gave me a link which I tweeted, and I also included it in an ongoing email conversation with a user. He's the only one that has answered so far...

To collect more answers, I will probably send it out with our next newsletter, and maybe put it somewhere inside the Dashboard.

I expect this to give us a clearer insight into what our customers really want, and why they are using us.

You can see the survey here: http://survey.io/survey/1addd

What surveys have you done? Which tools have you used? Let me know in the comments below!

Don't forget to follow me on Twitter or here on Tumblr! Or subscribe to my newsletter.

Stack Overflow is a forum where a lot of developers are looking for answers to problems they are having. What better traffic source is there to tap into for a developer targeted service like UserApp?

I searched Stack Overflow for questions regarding user authentication. And found one about how to handle authentication in an AngularJS app. The question has been viewed 1814 times since it was asked 4 months ago. That's about 16 views a day. And those views are very relevant for us. What if I could tap into that traffic source of well-targeted traffic?

Easy peasy! Since we already have an AngularJS module in place that does exactly what he is asking for, all I need to do is to answer his question and link to UserApp and the module.

Another great way to use Stack Overflow, is to learn what our users want. I found out that most of them wasn't just asking about how to authenticate a user - most of them asks about user handling with sessions and all that. And many of them refers to a specific framework - such as AngularJS.

I will continue to answer relevant questions, but as I stated, many of them are regarding specific frameworks, which I first need to integrate UserApp with.

It's definitely getting tougher. For every new day, and every new growth hack that I do, a pile of work builds up with follow up and iterating every past hack. Growth hacking is a lot about experimenting, testing, and optimizing based on the numbers.

But some hacks are harder to measure and takes longer time to see a result. Many of these ten hacks are about getting our users to understand the product with examples, demos, courses, and simpler integrations. And the results are more long-term. Enjoy! :)

Day 21: Recent activity email

Today I realized that I log in more and more rarely into UserApp. This has mainly one reason; I don’t need to log in to see new users - I get notified via email instead. But I miss all the other activities that occurs on our account, e.g. logins, canceled accounts etc. So that is what today’s hack is about. Letting me know the most recent activity via email.

Result: This email hasn't been deployed yet.

Day 22: Website code example

We often get requests for examples from our users. Everything from simple login forms to more complex services. While we have our demo apps, we don’t have any really simple examples that are ready to use and experiment with. That’s why I today created two CodePens: one with a signup form, and one with a login form...

Result: Instead of having the CodePen embedded into our website, I linked to a few different demos, see Day 26. About 7% of the ones who clicked on the CodePen signed up.

Day 23: Platform landing pages

Yesterday I started working on landing pages for each platform that we support. I didn’t have the time to complete and blog about it, so that’s why I’m doing this today instead. I will of course do another growth hack today as well.

Result: No traffic so far, would need to buy some Google ads to drive relevant traffic.

Day 24: Social login (OAuth)

As some of you might already know, we’re working on adding support for social login via UserApp. I.e. if you are using UserApp you will be able to allow your users to log in/sign up for your app with their Facebook/Twitter/GitHub/etc. account. In today’s hack I will start implementing this feature into our own sign up and log in process.

Result: This too, haven't been implemented yet. There's still some work to be done on this feature before releasing into production.

Day 25: Minimizing integration times

The main benefit with UserApp is that it saves time for developers by relieving them from having to program all the user management logic. But UserApp is a web service which means that it still takes some time to integrate with. For example if you have a web app built in AngularJS and want to integrate UserApp, you would still have to write the service for session handling, store cookies, login and logout, heartbeats, etc...

Result: Hard to measure, but it saves a lot of time for our AngularJS users, and our first Codecademy course is based on the AngularJS integration. In day 26 and 30 I'm making it easier to find the integration and the guides.

Day 26: Codecademy course

Since yesterday (Dec 6th) I have been working continuously with an idea that I got from Mandrill about creating courses on Codecademy to teach UserApp. The first course teaches you how to integrate user authentication into an AngularJS app.

Result: About 8% of the ones who clicked on the course on our website, signed up. In these 8 days it has been out, none has completed it. That's something I have to work with.

Day 27: Guest blogging

A few days ago I was asked to do a guest blog post about my favorite growth hacking tools. And so I will! I have already started writing and I hope to have it ready by today or tomorrow. I will update you when it is published.

Result: Not yet published. Will update you when it is!

Day 28: Testimonials

Today, I emailed some users asking for testimonials. And while waiting for replies I decided to improve the design for our testimonials on the website. The new design allows for multiple quotes and, in my opinion, looks better together with the rest of the design.

Result: I'm still waiting for a few answers to fill all four spots.

Day 29: A/B testing the sign-up form

So today I’ve made an A/B split test between including the name field on the sign-up form, or not.

Result: This was Friday, and in the weekend only two have signed up. Both was without the name. Maybe just a coincidence. Or maybe not.

Day 30: A/B testing getting-started guides

One of the hardest things in growth hacking (in my opinion) is to get the ones that signs up to actually use the product. Especially in developer-targeted APIs were they must learn a new API, a new GUI, and in many cases; a new concept of doing things.

...

That is why I today have decided to A/B split test the getting-started guide. The current one shows up directly after signing up, and consists of three parts; demo data, tutorial, and documentation.

Result: This was yesterday ;)

Later when there's time, I will try to follow up on the first batches of hacks as well.

Don't forget to follow me on Twitter or here on Tumblr! Or subscribe to my newsletter.

One of the hardest things in growth hacking (in my opinion) is to get the ones that signs up to actually use the product. Especially in developer-targeted APIs were they must learn a new API, a new GUI, and in many cases; a new concept of doing things.

I've designed the UserApp dashboard to be as simple and self-explaining as possible. And I've also written a bunch of articles in our help desk if there would be any doubts. The API is well documented and consistent. But to get our signups to use our product, they need to grasp both the API and the concept. This is what I want them to learn first directly after signing up for UserApp. There's no value in learning the GUI if they can't use it for anything.

That is why I today have decided to A/B split test the getting-started guide. The current one shows up directly after signing up, and consists of three parts; demo data, tutorial, and documentation.

Step 1 - demo data: We fill the account with demo data based on either Family Guy, Star Wars, or DC Comics. I believe this to help our users to understand how the GUI works.

Step 2 - tutorial: The user learns how to integrate UserApp with a login and signup form in HTML/JS. The forms can be used in production and it teaches the user how to use the JavaScript library. However, it only lets a user to sign up and log in. There's no session handling or what so ever.

Step 3 - documentation: When the user has learned how to use UserApp in practic, it's recommended that they learn all the other functions that can be used (more than signup and login).

The problem is with step 2. User management is so much more than just signup and login. Which pages should be accessible when not logged in? What should happen when the session times out? Should we save the session token in a cookie? Which user should be able to see what? And what about personification? And so on.

The only guide that teaches all of this is the UserApp with AngularJS course on Codecademy that I created in a couple of hacks ago. That's why I've changed step 2 to link to different guides. At this moment there's two guides, both on Codecademy: one to integrate with AngularJS, and one with plain JavaScript. And I will create more in other languages and frameworks. All of which demonstrates how to fully integrate UserApp into an app.

I expect this to lead to more users that actually gets started with UserApp and sees the full potential of how UserApp can be used . I'm split testing between the two getting-started flows and will be tracking the numbers with Mixpanel.

I'm back!

The last days I've been quite busy! Yesterday we won Venture Cup Syd in the category web/software. But I'm trying to catch up!

So today I've made an A/B split test between including the name field on the sign-up form, or not.

My intuition says that the form without the name field will lead to more sign-ups since the steps to completion are fewer. And the numbers that I track with Mixpanel will tell.

The disadvantage is that I don't collect the names, which else could have been used in later growth hacks. But it might be worth it.

Today, I emailed some users asking for testimonials. And while waiting for replies I decided to improve the design for our testimonials on the website. The new design allows for multiple quotes and, in my opinion, looks better together with the rest of the design.

I hope this to give some "social proof" and in the end lead to more signups.

What are your experiences with testimonials? Do they improve the conversion rates? And what do you think about my new design?

Are you a UserApp user and would like to give us a testimonial? Just let me know! :)

I'm a bit behind schedule and this was supposed to be yesterday's post. But I will do my best to catch up.

A few days ago I was asked to do a guest blog post about my favorite growth hacking tools. And so I will! I have already started writing and I hope to have it ready by today or tomorrow. I will update you when it is published.

I expect this to drive some new traffic, but since the article isn't about UserApp I shouldn't expect too much. But it's fun and will probably generate a few signups over the time :)

Tracking is done with Google Analytics and I will watch the referrer section closely.

Since yesterday (Dec 6th) I have been working continuously with an idea that I got from Mandrill about creating courses on Codecademy to teach UserApp. The first course teaches you how to integrate user authentication into an AngularJS app.

At the same time I've decided to make some changes to our website. Instead of the CodePen example, I've now placed three buttons that links to different demos - including the Codecademy course.

My expectations are that this will teach our users how to use the API with as little friction as possible. There's no need to download any code, and they won't have to set up a development environment, etc. And the whole experience is guided to educate the user. Hopefully this will bring them closer to the "aha moment".

I'm also tracking how many clicks each demo button gets.

The main benefit with UserApp is that it saves time for developers by relieving them from having to program all the user management logic. But UserApp is a web service which means that it still takes some time to integrate with. For example if you have a web app built in AngularJS and want to integrate UserApp, you would still have to write the service for session handling, store cookies, login and logout, heartbeats, etc. All this is redundant work that has to be done for every app that you build. And for every one of our users that use AngularJS.

What if we could relieve them from that burden too? Minimizing the friction and time getting started even more - and by so creating more value for our users.

That's what today's hack is about - integrating UserApp as seamlessly as possible into other frameworks. This is not about writing a new API on top of the existing, but instead integrating it with session handling, etc.

I started with AngularJS because it's a very popular framework and we're using it here at UserApp. I've created a module with a service and a couple of directives that will enable our users to add user authentication and fully integrate UserApp into their apps with just a few lines of code.

If you are interested in trying it out, just follow this getting-started tutorial.

I will also add this integration to the documentation and promote it through Twitter and our newsletter. Later I will create a video where I demonstrate how easy it is to add user authentication to an AngularJS app in just a few minutes.

As some of you might already know, we're working on adding support for social login via UserApp. I.e. if you are using UserApp you will be able to allow your users to log in/sign up for your app with their Facebook/Twitter/GitHub/etc. account. In today's hack I will start implementing this feature into our own sign up and log in process.

I think that this could be a great way to get more people to sign up and also to get them to log in more often. I forget my passwords all the time so to be able to log in with e.g. Facebook och LinkedIn is perfect for me. It's also very convenient when signing up to not have to enter my details over and over again.

However, I believe that social login is not just sunshine and rainbows. Have you ever faced the problem with not knowing which social network you used to sign up with? Was it Facebook? Or Twitter? Or maybe you didn't use a social network at all?

MailChimp has written a blog post about why they didn't went with social login. I recommend everyone interested in reading it.

In this experiment I will see if we could benefit from social login. I chose to only include GitHub as we are targeting developers, and at the same time just offering one social login alternative to not confuse our users.

Will we get more signups? And will we get more logins? I know at least that I will be a heavy user of this feature!

What's your experiences with social logins? Let me know in the comments below.

PS. This feature has not yet been launched as we are still testing and tweaking the last parts.

Yesterday I started working on landing pages for each platform that we support. I didn't have the time to complete and blog about it, so that's why I'm doing this today instead. I will of course do another growth hack today as well.

This is what Wikipedia says about landing pages:

In online marketing a landing page, sometimes known as a "lead capture page" or a "lander", is a single web page that appears in response to clicking on a search engine optimized search result or an online advertisement. The landing page will usually display directed sales copy that is a logical extension of the advertisement, search result or link.

In my case it will be a separate page for each platform - e.g. one for PHP with a sales copy and examples directed to PHP coders.

Each page has a header with our logo and a tagline. And as many other landing pages I've get rid of the main menu. Instead I've placed a footer at the bottom which includes a link to whatever the visitor may be looking for. After the header I've places some common examples in the targeted platform/language, a quote from one of our users, and the pricing table. Otherwise the page is streamlined to get the visitor to sign up for an account, and nothing else.

The landing pages will be SEO optimized so that they will show up at relevant search terms, and later also as paid ads (Google Adwords).

This is how the PHP landing page looks like:

My expectations are that visitors coming from search engines with searches like "user management [platform]" will land on the targeted landing page and will hopefully be more likely to sign up than if the regular website was shown.

I'm tracking the results with Google Analytics and Mixpanel, which will let me know how many users these pages converts each.

As always, any tips and feedback are welcome! Later today I will publish a blog post about social login and how I will test that on UserApp (with UserApp). So stay tuned!