Wrapbootstrap theme on Rails 4 App

A few weeks back I bought a theme from wrapbootstrap in order to play around a bit with a new design. This kicked off a fairly and confusing process to get it set up in my Rails 4 app. I couldn’t find any good answers out there, although I found a few people asking similar questions.

I bought the theme called Treble. http://wrapbootstrap.com/preview/WB089478D I don’t know if the process would be different from every theme, but I imagine it might be.

Once you purchase the theme, wrap bootstrap sends a zip file that includes a number of folders – the most important of which is the folder source/assets. This /assets folder contains 4 folders – fonts, images, js and style. From the documentation, which isn’t great, I assumed that I should drop these sub-folders into the respective folders in the asset pipeline.  My only experience with the Rails asset pipeline at this point had been in app/assets directory. The default file structure includes a javascripts and style sheets folder.

So my first attempt with the wrapbootstrap files was to drop them into the /app/assets directories. I added the style folder (from wrapbootstrap) to the stylesheets folder (default Rails), added the js folder (from wrapbootstrap) to the javascripts folder (default Rails). I also dropped the fonts and images folders into the app/assets folder which created those folders in the directory. This was mistake #1 and would up costing me a week of frustration.

I was getting crazy errors and tried to require different pages in the manifest file (application.js for example). After all that, the simple solution was that the folders needed to live in the vendor/assets directory. Adding them there, stopped the errors, and the page loaded – although this didn’t fix everything. I could get the page to load, and the JS seemed to be working, but the images weren’t loading.

One of the problems that a friend found was that somehow, bootstrap was being called twice. I couldn’t get a full explanation, but the fix is to comment out line 19 which reads <link rel=”stylesheet” href=”assets/style/bootstrap.css” type=”text/css”>. I’m guessing there were some files left over from the install in app/assets and those were getting compiled along with the files in vendor/assets and this was causing issues.

I still had a few more problems which were solved by copying all the folders into the /public folder. Rails seems to pull the bootstrap.css file from the vendor folder and the images from the public folder. So when you need to edit the CSS, do it in the vendor files and when you’re changing the images, do that in the public folder.

Hope this helps at least someone out there.

Posted in rails, Web | 7 Comments

Making Users Pay – Building a Site with Stripe and Devise

I took the One Month Rails tutorial and I’m continuing to build out the site. I wanted to add a credit card charge for a SaaS model business and I’d heard great things about Stripe, so I used them. The One Month Rails tutorial basically builds a Pinterest clone and uses Devise for a User model and authentication. Here is an example from the OMR creator. http://omr-pinteresting.com/

Stripe has great documentation and there are tutorials out there, but nothing was perfect for Devise + Stripe, and I’m also working with Rails 4 and Ruby 2, to make things a little more interested.

I started by building a single credit card charge setup from the Stripe tutorial. https://stripe.com/docs/checkout/guides/rails This works well and is fairly straightforward. The one tricky piece for me was pushing through the ENV variables. It was fairly straightforward to do this manually when you start the rails server (below), but getting the ENV variables in there automatically at setup was harder.

PUBLISHABLE_KEY=pk_foo SECRET_KEY=sk_bar rails s

The answer was to get the ENV variables into my ~/.bash_profile which took some yak shaving, but here is the best place to start.  http://stackoverflow.com/questions/7501678/set-environment-variables-on-mac-os-x-lion

So far things have been easy, but we just followed the Stripe tutorial, there is no User involved yet. For simplicity, maybe user experience, I want:

  • The User to enter their credit card at signup,
  • A single payment plan (for now),
  • Every User to give a credit card.

So if the person is a User and can login, then they have paid with a credit card. Stripe has really good subscriptions built in, and again, their documentation is really good, but the documentation isn’t the complete picture and it takes some thought to bring in the Devise setup. https://stripe.com/docs/tutorials/subscriptions

I found an interesting tutorial that outlined how I wanted things to work, although simply copying and pasting into my app wasn’t going to work and the tutorial is incomplete. http://blogs.clogeny.com/stripe-integration-with-rails-application/ It helped me understand a few of the processes better and seemed to have the right approach.

The approach is to add the credit card forms to the signup page. When the user presses submit, Stripe Javascript grabs the credit card information and submits it to Stripe (my app never sees it) and returns a token which is entered into a hidden field in the form. The JS then submits the form to create a User. Finally we run an after_create callback on the User model to charge the card and subscribe the User (and Stripe Customer) to the subscription plan.

I found myself continuously referencing the Stripe tutorials along with the guide from Clogeny.
Stripe = https://stripe.com/docs/checkout/guides/rails and https://stripe.com/docs/tutorials/subscriptions
Clogeny = http://blogs.clogeny.com/stripe-integration-with-rails-application/

Following the Clogeny process with some corrections and different ideas…

Step 1: Stripe Gem- Installing the gem should be done already if you’ve built the single charge from the Stripe guide.

Step 2: ENV variables  - These should already be done from the single-charge test. You also want to follow best practices for ENV variable and not put the in code that might end up on github. Also pay attention to the different variable names in this guide. It looks like the Stripe.api_key (Clogeny) is related to the Stripe secret key, but the initializer is different in the Clogeny guide. I stuck with the initializer code from the Stripe guide.

Step 3: Include the JS in your layouts file. I needed to change the syntax to get mine to work. Here is the code that worked for me.

app/views/layouts/application.html.erb

Step 4: Add the Stripe publishable_key to the application page. Mine looks much different from the Clogeny guide.

app/views/layouts/application.html.erb (same page as above)

I’m not sure how much the order matters, but you can see my code here https://github.com/mikesabat/capecod/blob/stripe_setup/app/views/layouts/application.html.erb At this point I would load the signup page and see if the publishable_key shows up when you Inspect the page elements.

Step 5: New User Form – Now we are getting somewhere. We want to add the hidden field and the credit card form to our signup page. I already had the User model form built so I tried to match the styles as much as possible.

App/views/devise/registrations/new.html.erb

Step 6: JS for CC form – This had me confused for a week or so. We are adding Javascript to handle the form that we just created. To review, when the user clicks submit the JS will pause the form, take the credit card information and submit it to Stripe. Stripe will reply with the credit card token, fill it to the hidden field in the form and then submit the form.

I created a file for this app/assets/javascript/charges.js.coffee

Step 7: Controllers – It was a little tricky figuring out Controller actions, once the form is submitted. Devise doesn’t create a User Controller, so this takes a little work to figure things out. We need to add a stripe_card_token to the User Model, but we can’t just list that as attr_accessible. Rails 4 introduces strong parameters and setting up attributes on the Devise User is a little different. Here is the documentation. https://github.com/plataformatec/devise#strong-parameters

This code in app/controllers/application_controller.rb will let the app add or edit parameters on the User Model during signup and edit actions.

Step 8: User Model – Before the user is created Stripe is grabbing the credit card information, supplying a token and we attach that token to the User Model as the User is created. We still need to subscribe the User to the subscription plan and charge the card. Stripe has great documentation on this https://stripe.com/docs/tutorials/subscriptions I’d recommend creating the plan on the dashboard, as it is so easy.

My code matches Stripe’s example pretty closely, but there are two differences. First, I don’t have the API key in my model, but it still works. Second, for the :plan attribute, Stripe wants the ID number, not the plan name. I think their documentation is incorrect in that respect.

app/models/user.rb

Once this is set up you should be able to test out the signup process and see the charges and Customers being added on Stripe.

Step 9: Error Messages – After putting through a number of successful transactions and watching the fake money pile up on Stripe, I decided to test out a bad credit card number and I didn’t see what I expected. My normal debugging methods didn’t work because the problem was in the JS and nothing appeared on the server logs. A friend helped me make this work.

Here is the code in app/assets/javascripts/charges.js.coffee – specifically what is coming after the ‘else’ – if it’s a bad credit card.

This says that if Stripe does not return a 200 status (good credit card), then we should find the div with class=stripe_error and display it. It will look for this div on the User registration page.

App/views/devise/registrations/new.html.erb

There is some tricky stuff, specifically ‘style=’display:none” in the div, and canceling that in the JS, but if you copy what I have it should work well.

This is a lot of information, and I hope it helps. There is still more (like getting this to run on Heroku), but this is a good start. If you’re building something cool and this helps, please link to it in the comments. Here is the code for my app so far.  https://github.com/mikesabat/capecod

If you made it this far, please give me an upvote on HN https://news.ycombinator.com/item?id=6910591

Posted in rails | 9 Comments

Learnign Rails Chapter 1

After a year-long course trying to learn the basics of Ruby I’m moving on to learn Rails. I definitely would not say that I have a firm understanding of the Ruby language, or even the concepts, but I’ve learned how to google a few things. For Rails I’m using the Head First book which is a super graphic and sing-songy way to learn. It’s corny, but pretty good at helping you actually build things that you may be able to use.

In the first chapter there were a few snafus that I was able to get around with some help from the internet. First, this book is old, it’s been sitting on my desk for at least a year. In that time, a new version of Rails has been released which made things tricky. I believe the first command on the first page didn’t work because there is different syntax with Rails 3. Great!!!

I found a site that was a huge help. The blog is written by Tim van Gelder and he’s made a simple spreadsheet of the syntax changes. Find it here http://timvangelder.com/2012/02/25/using-head-first-rails-with-rails-3-x/ This was great and a quick fix.

My second issue was a bit tougher. I was so excited with my new powers that I accidentally ordered Rails to create a table, but I didn’t add any fields to the table. Of course with the scaffold command I didn’t know how to do-over. I guess that I should have just generated a migration to add fields to the table, but I wanted to do this the hard way.

I was actually able to delete the table that I created in the database SQLite3. I found a post on http://dashdingo.org/post/1627307077/sqlite3-sqlexception-table-already-exists that helped me do this. One thing to note is that Rails names the database table as a plural. I knew the website address was plural, but it wasn’t clear that the actual table is named the plural as well.

Posted in rails | Leave a comment

Creating Successful Calls to Action

If you’ve read my previous post, then hopefully your convinced that the most effective use of your mobile campaign is to add calls to action to media as a way to get viewers to engage with your brand. Now I’d like to talk about how to create successful calls to action that get people to take out their phone and text in.

What is a call to action (CTA)? A call to action is when you ask someone to take an action – usually happening in media. One example of a CTA is to say “visit our website at http://www.example.com”. An example of a mobile call to action would ask someone to text a Keyword to a shortcode.

There are 3 important factors to creating successful calls to action.

Clarity is King The call to action should be simple and very easy for the viewer, listener or reader to understand.

“Text JOIN to 12345″

This seems straightforward, but there are a lot of ways to mess this up – most of them include getting too cute with the keyword or the short code. Keep it simple so that the person hearing the message is not confused what to do.

Make the CTA prominent Every type of media has it’s version of fine print. Don’t put the call to action in the fine print. If you’re driving people to sign up from the commercial or advertisement, make sure the ask is a major point of the commercial. The person doing graphics should understand how to make the call to action pop – it’s your job to make sure they do.

Compare:

To

Repeat The standard rule for TV and radio is the CTA should be repeated 3 times. For video you should also have the call to action on a sidebar or bottom 3rd of the screen the entire commercial. In most print ads you cannot repeat in the same way, so prominence is more important.

Find a Reason Of course the most important aspect of the call to action is that the target needs a good reason to take action. In almost every case it’s better to be specific – “For more information text KEYWORD to 12345″ doesn’t work well. People know how to find more information, it’s called google.

The best CTAs ask for something specific:
“To vote on American Idol, text the word VOTE to 12345″
“To find the closest location to get a flu shot, text SHOT to 12345″
“For a chance to win, text ENTER to 12345″

Check back for some examples of successful calls to action.

Posted in Uncategorized | 1 Comment

The most important function of your mobile campaign

I rewrote this post several times, trying to articulate the point that I want to make. I’ve been thinking this for a long time and I still cannot distill this point into a concise title, so I guess it will take a little more typing.

Working in business development for a mobile company I hear a lot of good ideas for mobile campaigns (and a few bad ones), but there is one strategy that consistently produces the most value for the company looking to launch the mobile campaign. This strategy is where I recommend potential clients start. And the strategy is…

Use mobile to create engagement and opt in to future communication driven from your media.

This means to include mobile calls to action in TV, radio, print, press releases, outdoor and at live events. In all of these instances it’s a no-brainer to say your website, right? All of this media is actually much better suited for a mobile call to action rather than a web call to action (but do them both anyway).

I know the campaign will be successful when the potential client says, “We want to incorporate a mobile call to action into this media campaign… to get more people involved.”

Adding a mobile call to action to media works so well because a phone is a communication tool. Users can take that first step and “sign up” with their phone, and in doing so they are entering your database/digital universe. After they text in it’s very easy to ask for their name, email address, physical address or any profile information.

Over and over again I’ve seen clients  include mobile calls to action in media and be very happy with the results. In every case the client gets more subscribers to their follow up communications campaign. As a rule of thumb, a mobile CTA should bring in about 4 times as many opted in email addresses as a web call to action, but I’ve seen differences as large as 50 times more opted in emails from mobile CTAs.

Next I’m going to talk about how to create successful mobile calls to action in media, so stay tuned.

Posted in Mobile 2.0, Text Messaging | 1 Comment

Measuring a Mobile Campaign

When I discuss mobile campaigns I’m focusing on opt in text messaging. We already know how to measure mobile advertising, with click-throughs, and possibly actions, if you’re lucky. Opt in text messaging is a little different. It’s most similar to an email campaign, but with SMS there are usually more metrics available due to the mobile device on which the text is received.

I’ve helped design hundreds of campaigns for Mobile Commons clients and would like to share some of the most common metrics that help prove the success of mobile campaigns.

Opt Ins: These the number of subscribers on the SMS list currently. The number of opt ins all time (including people that have opted out of the list) is probably important as well. In almost every case, the number of opt ins is the most important stat in the campaign. In most cases, the number of opt ins determine if the campaign is a success or a failure. When many people are subscribed it’s possible to try a lot of different approaches and when no one is subscribed it really doesn’t matter what communications you try.

Unfortunately, the opt in stat is a bit of a trick – it’s not a mobile stat at all. The number of opt ins really measure the effectiveness of the media promoting the campaign (and that’s valuable too). If a TV commercial asks people to text in PEPSI, the number that text in are primarily a measure of the clarity of the commercial and perceived benefit of taking the action. If you compare the number of people that text in from the commercial and the number of people that visit a website or call a phone number that would give a better idea of the effect of mobile on a campaign.

Since opt ins are a good way to measure the effectiveness of a media campaign, it can also work to compare different media campaigns. It’s possible to set up different campaigns, or different opt in keywords to measure what channel, media or commercial cause the most people to pull out their phone and text in. At Mobile Commons we’ve tested this several times. We’ve tested the same TV commercial on different stations and we’ve tested the same message on Twitter, Facebook, radio and through QR codes. (In the latter test, radio CRUSHED twitter radio and QR).

Phone Calls: On unique aspect of a mobile campaign is that it takes place on a mobile phone. Generating phone calls is probably the second most common goal for mobile campaigns that I’ve worked on. Tracking the number of phone calls placed and calculating a conversion rate based on the number of text messages asking people to call in are both good measures of a mobile campaign.

Why would you want to drive and track phone calls? Different organizations drive phone calls for different reasons, but the most popular reasons are for advocacy, donations or purchases, to set up appointments or for customer service.

The number of calls made and the conversion rate are only the two most high level stats that are important to track. It’s important to track who is making the calls, how long they are staying on the phone, and whether or not their calls are being connected. It’s also important to pay attention to what promotions are driving calls, as calls can be generated from text message or the web in many cases.

Clicks: Link shortening services can make it easy to track how many opted in subscribers are clicking on links included in text messages. If you are trying to drive subscribers to mobile web pages, it’s important to understand mobile web browsing habits.

It’s best practice to direct links to pages on your site that have content. Sending a visitor to your home page on a mobile phone is not that valuable – mobile visitors won’t surf your site on a phone, as much as they would do on a desktop or laptop. Obviously it’s advisable to have web analytic software to track mobile web visitors and measure the value of each click.

One surprise that we found is that you can find your biggest influencers/evangelists by tracking web clicks. At Mobile Commons we not only track how many clicks each link gets, but we track who clicks on the link, and how many times they click. When looking through the data, we discovered that certain subscribers were clicking a link 50 or even 100 times – and always from different phones and browsers. It quickly became apparent that a single subscriber wasn’t clicking 50 times, they had Twittered the link, or posted to Facebook, and their followers had clicked 50 times.

Text Responses: Sometimes measuring success is as simple as keeping track of how many people respond. Since their is no “open rate” with text messaging, response can be the most basic action that subscribers are asked to take. Believe me, people will reply to text messages – as if they were texting the CEO of the company!

Asking people to respond is fairly straightforward, depending on the campaign. It’s important to follow up with people appropriately and offer increased engagement for people that are looking for that.

Forwards: Forwarding a message, or telling a friend can be tricky with text message. There are basically 2 ways that subscribers can forward to a friend, and they each have different tracking mechanisms.

The first way subscribers can forward your message is simply by forwarding the message on their phone. In this case the message should be written to ask users to forward the message, and ask the recipient of the forward to take some action. For example the message could read “Forward this message to a friend, and ask them to text JOIN to 12345.” In this case the keyword JOIN should be unique to the forward, and the best measurement is to track how many forward recipients take action by texting in.

Some texting platforms offer a Forward to a Friend feature. In this case a subscriber can send a message to their friends through the messaging system and the system should be able to track how many messages were sent to friends, and also how many friends took action. Tracking is much better with this method, but the user experience suffers. With the second method, the original subscriber must tell the messaging system their friend’s number either by text or the web.

Generally tell a friend is a recommended promotion for messaging. When the recipient is asked to forward on their number, we’ve seen as high as a 15% opt in rate from friends. This has been lower when subscribers use the system’s mechanism to opt friends in to the campaign. The Tell a Friend feature works much better from the web especially on a redirect page after a click to call.

This post has been longer than expected. Hope it helped. Please don’t hesitate to ask me questions or leave comments.

Posted in Text Messaging, Uncategorized | 1 Comment

What is a shortcode?

A short code is a 5 or 6 digit number that is used for text message marketing. When you see a call to action that says “Text VOTE to 12345,” VOTE is the keyword and 12345 is the shortcode. For most organizations, they will use one short code, but may use many keywords on that short code in order to designate different campaigns.

Why do we use short codes?

The carriers want organizations, both non profit and commercial, to use short codes for SMS marketing and communications. There is a layer of businesses called aggregators that connect directly with the carriers and are able to deliver text messages over short codes at higher rates and they’re able to verify delivery. Aggregators only send messages over short codes. In almost all cases, if you send messages over a regular 10 digit number, delivery verification cannot be confirmed, and throughput is very slow.

How much do short codes cost?

In the United States there is only one place to obtain a short code and it’s rather straightforward to lease a short code. If you want to choose the short code number, the cost is $1,000 per month. If the number is not important, you can lease a random short code for $500 per month. Similar to a website, you’ll need to host the short code (with an aggregator). Generally, the hosting price is $500+ per month. Hosting and delivery is important so you don’t necessarily want to go with the cheapest option.

Many vendors (including my employer) offer the use of a shared short. A shared short code is owned by the vendor and multiple clients can use the short code – hence the word shared. The setup is comparable to using gmail or yahoo for email, you are sharing a domain. All of the basic rules apply to shared short codes, except the cost structure will be different. If you are looking to get started with mobile communications starting with a shared short code is cheaper, faster and easier to get up and running.

How long does it take to get a shared short code?

This is definitely the most complicated question to answer. A good estimate is that it will take 6-8 weeks to be up and running with a new short code. Leasing the actual short code is easy, just go to http://usshortcodes.com choose your short code and pay.* The next step is to aggregate the short code with the carriers. This means that the aggregator hooks up the short code with each respective carrier. Each phone carrier has their own schedule and process so this process can be a little confusing and it’s hard to forecast exactly when the short code will be live. Just hang in there and stay in contact with the aggregator.

*You can reserve a short code for up to 60 days without paying.

Posted in Text Messaging | Leave a comment