Using AngularJS, Tabletop and Google Sheets to extend signup pages and user tracking on NationBuilder

When we implemented our action program at Climate for Change, we needed to create a system to support it on our website that was relatively easy to administrate and grow, and that allowed us insight into user behaviour.

Essentially what was needed was a bunch of signup pages, one per action that the user could take, but they would need some custom details to support all the dynamic generation of content and tagging of users.

NationBuilder doesn’t support custom fields for pages, but Angular, Tabletop and Google Sheets allowed me to quickly roll my own. Continue reading “Using AngularJS, Tabletop and Google Sheets to extend signup pages and user tracking on NationBuilder”

Dynamic tags on a NationBuilder Signup Page

If you want a bit more flexibility than what’s offered by NationBuilder for tagging people on signup, dynamically adding tags from Javascript is quite straightforward.

If you examine the code for a signup page, NationBuilder just uses a hidden input element to add tags to a user when they submit the signup page.

We can use this to dynamically add tags to a signup page by inserting or altering the tag. Continue reading “Dynamic tags on a NationBuilder Signup Page”

Dynamic destinations for NationBuilder Signup Pages

NationBuilder’s features out of the box are pretty versatile, but when I built the take action section of Climate for Change’s website, I wanted some more flexibility on the way Signup pages worked.

Why would you want a dynamic destination for your signup page?

In our case, there were two reasons – first, we wanted to guide our supporters through several activities they could do, and we wanted to know both when they started and when they finished. Continue reading “Dynamic destinations for NationBuilder Signup Pages”

Using AngularJS with NationBuilder

AngularJS is a great framework for quickly building elegant Javascript code to enhance the user’s experience.

While with Climate for Change, I wanted to create some dynamic pages on our NationBuilder website.

While NationBuilder does allow for some server side coding through their Liquid templating, if you need the flexibility of writing fully functional code, then going client side with Javascript is the only option. AngularJS was the obvious choice as it allowed me to build functionality quickly, which meant it would fit in between my main duties.

Below are the specific changes to convention and configuration that I used to get Angular going on our site. Continue reading “Using AngularJS with NationBuilder”