Birdseye + Open Graph
Web developers and practitioners are working to make the internet more semantic. Open Graph is an evolution of the Semantic Web Standard. Many developers are already using Open Graph in web pages for Facebook's platform. This allows unparalleled customizations, interactions, and engagement with your audience regardless of platform or application.
Birdseye want’s to apply this same easy implementation of Open Graph to email. By adding a small amount of metadata to your emails, you can create your own custom actions for your recipients.
Let’s break it down
Start by adding meta tags in the HTML of your email. Each tag has the attributes, property and content. All that is needed from you are 2 values for those attributes.<meta property=”your property value” content=”your content value” />
You can add this anywhere in the code of your email.
Let’s try it
So, for example, to create a unique button with an action that points to a promotion page from your newsletter, you’ll need 2 instances of the meta tag to make it work. One for the actual button and one for the destination of the button:
<meta property="email:action" content="Grab $100 off this deal!" />
<meta property="email:action:web_url" content="http://fab.com/deal/2342342" />
The OGP array order structure allows the two meta tags to associate with each other with the same object.
<meta property="email:action:web_url" content="http://fab.com/deal/2342342" />
Voilà! Within Birdseye your unique button can be accessed quickly within the inbox.
Let’s try adding three unique action buttons in your email:
<meta property="email:action" content="Trip Pick Of The Week" />
<meta property="email:action:web_url" content="http://jauntsetter.com/current_issue/trip_picks/narrowsburg-ny-a-cool-gem" />
<meta property="email:action" content="Angela Barrow" />
<meta property="email:action:web_url" content="http://jauntsetter.com/current_issue/jauntsetters/angela-barrow?utm" />
<meta property="email:action" content="Travel Deals" />
<meta property="email:action:web_url" content="http://jauntsetter.com/current_issue/travel_deals/our-top-travel-deals" />
<meta property="email:action:web_url" content="http://jauntsetter.com/current_issue/trip_picks/narrowsburg-ny-a-cool-gem" />
<meta property="email:action" content="Angela Barrow" />
<meta property="email:action:web_url" content="http://jauntsetter.com/current_issue/jauntsetters/angela-barrow?utm" />
<meta property="email:action" content="Travel Deals" />
<meta property="email:action:web_url" content="http://jauntsetter.com/current_issue/travel_deals/our-top-travel-deals" />
It's that easy.
Let’s see what you can come up with
We can’t wait to see what you can do with Open Graph and Birdseye. As you can see, a little goes a long way in pushing email interactions forward. You can learn more about Open Graph at ogp.me and be sure to let us know what you come up with.Try it out with your own email
We’ve created a GitHub repository for unique JavaScript that’s currently used in Birdseye to parse out the Open Graph tags. With these scripts you should be able to create custom actions in your own apps or projects, just by inserting a few lines of Open Graph meta data.
In the future we plan on giving you more tools (possibly a sample app) to explore more interesting ways to take advantage of Birdseye.
