Localytics and Zurb Foundation for Emails

zurb-localytics variablesFor those that many not be familiar with Localytics, they provide a very nice system for gathering metrics on mobile applications. They have recently partnered with SendGrid to provide email campaign services in addition to their original suite of in-app notifications and other mobile campaigns.

Localytics uses the Liquid templating system (created by Shopify) as it’s means of creating dynamic email content. This system uses a handlebars-styled format for adding variables to the email content, e.g. {{myvariable}}. Unfortunately for users of Zurb Foundation for Emails, this is the same format that Zurb uses for it’s own variable. The means that is you attempt to include Liquid/Localytics variables in your Zurb Page or Partial files, the compiler will throw an error.

Although I’m sure there are other ways around it, one simple solution was to use the Zurb Panini “helper” functions. These functions allow you to extend the functionality of the basic Panini engine with your own directives. Using a helper, we can include a *helper* to add in the Localytics/Liquid variable in the proper format rather than trying to hardcode them into our email template.

To do this, we simply created the file localytics.js in the /src/helpers directory of our Foundation for Emails template. Here is the contents:

// ====================================================
// Localytics template variables
// ---------------------------------------------------
// This will allow you to add in handlebars-style 
// variable without blowing up the Zurb compiler.
// example: {{#localytics}}email['org']{{/localytics}}
// ====================================================
module.exports = function(options) {
 // options.fn(this) = Handelbars content between {{#bold}} HERE {{/bold}}
 var email_field = '{{' + options.fn(this) + '}}';
 return email_field;

As you can see in the above code, there are more comments than actual code. The code will allow you to add in any Liquid variable from Localytics into your email by placing it between the two helper function delimiters.

You can get this code from Github here.

Leave a Reply

Your email address will not be published. Required fields are marked *