Spree Commerce

Try It Now

Fast Checkout with Backbone.Marionette

Posted on August 05, 2013 by Ryan Bigg

There’s been a lot of buzz recently around using a JavaScript frontend to talk to a Ruby backend in order to make websites faster. In particular, the three “hot” frameworks at the moment are Ember, Angular and Backbone.

We’ve been working on building an example of a quick checkout using a superset of Backbone called Backbone.Marionette (with a book about it here). This project can be found at radar/spree-marionette and uses Spree’s API in conjunction with Backbone.Marionette to build a fast checkout process.

We would love for some people to poke and prod at this and let us know what could be improved upon.

PayPal Express Extension

Posted on July 29, 2013 by Ryan Bigg

We’ve noticed recently that a lot of people have been wanting to use Spree and PayPal Express Checkout together and that those people have been coming against problems when they attempt to do so with the more recent versions of Spree.

Over the years, the codebase for this extension has grown and grown and grown, and as a consequence has gotten extremely messy. When we attempt to fix an issue in this codebase, it’s confusing and there’s no testing “safety net” in place to make sure that our changes are a) correct and b) not going to break anything else. In addition to this, our experience with PayPal itself has been… less than fun. APIs behaving differently between testing and live, situations where transactions would work in one instance and not another and so on. Hence we’ve been reluctant to do any work on this extension for fear of further issues.

It’s really a terrible thing to have an officially supported extension for such a major part of shopping carts on the web and have that officially supported extension not work. When it doesn’t work, people get upset, and when people get upset, we get upset.

So to put an end to this upset-ness, we’re working on a new and improved Spree PayPal Express extension aptly called “better_spree_paypal_express”. This extension does a couple of things differently.

Firstly, it doesn’t hack the CheckoutController class to make things work. Instead, there is a completely separate controller within the extension called PaypalController which deals with interacting with PayPal. The CheckoutController is left to its own devices.

Secondly, it uses PayPal’s own Merchant SDK library, rather than Active Merchant’s own code. This way, we can be sure that whatever happens to PayPal’s API, they’ll hopefully update this gem and we don’t have to wait for a patch to land in Active Merchant.

With just these two minor differences, the amount of code in the extension has been cut down and it’s extremely easy to test walking through a Spree checkout with it. Because the code’s cleaner, the barrier to entry is much lower in order for people to be able to figure out what’s going on within the extension. If there’s a problem with the extension, then submitting a patch should be fairly easy.

We’re currently looking for people to give the extension a try in place of the current `spree_paypal_express` extension. If you’re looking for PayPal Express Checkout support with Spree, please try out this extension. If you find any problems with this extension, please report them on the repo’s issue page.

Working to Support Rails4

Posted on July 01, 2013 by Washington L Braga Jr

Rails 4 was released last week and the Spree team has already made significant efforts to support it. We’ve been doing some work on a Rails4 branch on the last couple of weeks. You might want to check out the branch logs to get an idea of possible breaking changes related to Rails 4.

At this point users should be able to run Spree on a Rails 4 application following the steps below.

Create a new Rails 4 project.

gem install rails --version 4.0.0 --no-ri --no-rdoc
rails _4.0.0_ new ecommerce

Add the following lines to your Gemfile.

gem 'spree', github: 'spree/spree', branch: 'rails4'
gem 'spree_auth_devise', github: 'spree/spree_auth_devise', branch: 'rails4'
gem 'ransack', github: 'ernie/ransack', branch: 'rails-4'
gem 'awesome_nested_set', github: 'huoxito/awesome_nested_set', branch: 'rails4'

Install Spree.

rails g spree:install --sample=false --seed=false

At this point, update the Spree initializer to point to the right User class.

Spree.user_class = "Spree::User" # at config/initializers/spree.rb

Seed and load sample data.

rake db:seed
rake spree_sample:load

We’re looking foward to your feedback! And please let us know if you run into any issues. Hopefully we should have new releases for every Spree dependency some time after the official Rails 4 release. An official Spree version with Rails 4 support will come soon after that :-)

Tracking E-commerce With Google Analytics

Posted on June 17, 2013 by Wes Ketchum

Google Analytics comes with support for tracking e-commerce right out of the box. All you need to do is some basic configuration and your website will be ready to start gathering data on transactions and items sold. Spree even takes care of adding all the necessary JavaScript and makes the setup as simple as pasting a tracking ID into the Admin section of your store.

  • Google analytics may not work if you are running your app on localhost. See the section titled Testing on localhost here . To get around this try pow if you are using a Mac. Otherwise, it should work fine in production.

Set Up

The first thing you will need to do is set up a Google Analytics account if you do not already have one. Once you have an account you will need to enable e-commerce tracking for your website. This can be accomplished by logging into Google Analytics and following these steps.

1. Click Admin at the top of any screen in Analytics.
2. Use the menu in the Profile column to select the profile you want.
3. Click Profile Settings.
4. Under the Ecommerce Settings section, select Yes, an Ecommerce Site/App.
5. Click Apply.

Now that e-commerce tracking is enabled, it is time to configure your Spree store. Lets start by grabbing the tracking ID inside of Google Analytics. This can be found by clicking on Admin in the top right, and then the Tracking Info tab. The ID will be in the form UA-XXXXXXXX-X. Now go into the Admin section of your Spree store and click on the Configuration tab followed by the Analytics Trackers link at the bottom of the right side navigation. Click on the link to create a new tracker and enter your Google Analytics ID.

  • In older versions of Spree the Configuration screen will look different, however the functionality is all still supported.


Your store is now ready to start tracking e-commerce through Google Analytics. To test that everything is working, walk through the ordering process. Add an item to the cart, click Checkout, and make sure you get all the way to the order confirmation page. Once that is complete, go to Google Analytics and click on the reporting tab. On the left side navigation click on conversions, e-commerce, and then overview. You will see a page similar to the one below outlining some data gathered from your store.

  • Make sure the date filter is set to the current day on your report! The data from your store may not show up in real time. Sometimes you will have to wait a few minutes before you see a transaction.


If you wait for a couple of minutes and still do not see a transaction inside Google Analytics, check to see if these two conditions were met.

  • On the order confirmation page in your Spree store, make sure the Google Analytics JavaScript is present. It should be located at the bottom of the page source and begin with

var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);

If the Javascript is not present, be sure you are still including the spree/shared/google_analytics partial in your application layout.

  • Use the developer tools in your browser to inspect the Spree order confirmation page. On the network tab make sure there is a _utm.gif resource at the bottom of the page. If you do not see that than your data is not being sent to Analytics and is most likely a problem related to using localhost as mentioned previously.

That’s all there is to it. Please leave a comment with any questions or problems. Enjoy!