GMail Signatures Extension

by FT Labs,

Every month, our B2B team send thousands of emails to our clients and prospects across the world. One of the FT’s goals for 2016 is to reach a target of 1,000,000 subscribers. To that end, we wondered if it was possible to automatically embed links to FT content in all of those emails as they were being sent, with the hope that some recipients would be enticed to subscribe.

With this in mind, we built a Chrome Extension that would detect when a new email was being composed, and would then add in the latest news headlines from an FT RSS feed. Once installed, every new email sent from that FT account would automatically have a tempting signature appended to it looking much like this one below.

GmailSignaturesDemo

We’ve made this extension available to everyone at the FT on our internal Chrome store. If you’re one of us, you can grab it here

If you’re of a technical disposition, you can take a peek at the source code for our extension and for the service that delivers content to it.

Why a Chrome Extension?

At the FT we have Google Apps for Work, so a great number of our B2B team use the Gmail Web interface to email our prospects, and the Chome Extensions API gives us great flexibility when it comes to manipulating the content of pages, so it was the natural choice.

How does it work?

The extension itself is a rather simple affair, once installed, a user can click on the icon in the top right of their screen to reveal a dialog which allows them to configure the source of the articles (by way of a public RSS feed), the number of articles to insert, the theme, and content to insert. Once those settings have been saved, every time a user of the extension starts to write an email we append the signatures, according to the configuration, to the compose dialog.

As mentioned above, we get the content for our signatures from an RSS feed, but the retrieval and parsing of the RSS content doesn’t happen from within the Extension itself, this happens in a small Node.js app that we’ve created to work in tandem with the extension. Whenever it’s time to append a signature to an email, our Chrome extension makes a request to our Node app, passing it the URL and configuration options for the content we want to add to the email. Our server then goes and grabs the RSS feed, parses its content and returns the HTML that gets inserted into the signature to our extension. The extension then appends this content to our emails.

How do we know where and when to insert the signature?

Inserting content into a webpage with a Chrome extension is a simple task, but knowing when to insert the signature requires some consideration. We don’t want to risk inserting random content into nodes in the GMail interface, and we don’t want to perform expensive checks to see when a compose dialog had been opened, as this could adversely affect the user’s experience. With this in mind, we opted to use the MutationOberver API. This neat API lets us execute code every time a node is created or removed from a page, so instead of checking to see if something has changed on a page, we know for certain that something has. All that needs doing next, is deciding whether or not we need to insert a signature.

With the MutationOberserver, we know when we can insert a signature, but the question of whether we should is yet to be resolved. The simplest solution is to append the signatures to every single email being sent, brand new ones and replies, but after chatting with our B2B compatriots, we felt that this might be overkill. Instead, we decided to only automatically append signatures to brand new emails and to give the users of the extension the ability to manually add signatures to other compose dialogs with a new button

FTLabs-GmailSigs-Just_One_FULL

Gmail doesn’t make it easy to find the right place to put our signatures. Instead of nice, semantic attributes to suggest the function or purpose of each DOM node, a random string identifies each node. We suspect this is a result of Google’s Closure tool. Fortunately, these remain constant, so once we managed to identify the characters that a compose dialog has, we could then insert our signature into the editable text area of the compose dialog. This works for now, but if the characters we use to identify compose dialogs change, we would need to manually update our extension to handle the new identifiers.

While we append the signatures to the emails, we also set some custom data attributes, so we can identify compose dialogs which have already had the signature appended to the emails. This allows us to update signatures that have already been appended to emails and stops us from overwriting existing signatures that may have been modified by the user.

How will we measure the success of this project?

At the time of writing, most of our London B2B team have the signatures Chrome extension installed on their systems. We’re currently tracking clickthroughs and a variety of other metrics to determine whether the recipients of emails with signatures are clicking through to FT content. If, after a certain time, we can see an increase in subscriptions following a click on one of our emails, we’ll consider the project a success.