<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Ewan Dennis</title>
    <description>The latest articles on Forem by Ewan Dennis (@ewandennis).</description>
    <link>https://forem.com/ewandennis</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F37885%2F5d8953c3-8255-435a-92d1-40bd85f3ab62.jpeg</url>
      <title>Forem: Ewan Dennis</title>
      <link>https://forem.com/ewandennis</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/ewandennis"/>
    <language>en</language>
    <item>
      <title>Tracking Recipient Preferences With The User Agent Header in Elixir</title>
      <dc:creator>Ewan Dennis</dc:creator>
      <pubDate>Fri, 13 Oct 2017 13:01:32 +0000</pubDate>
      <link>https://forem.com/sparkpost/tracking-recipient-preferences-with-the-user-agent-header-in-elixir-2j1</link>
      <guid>https://forem.com/sparkpost/tracking-recipient-preferences-with-the-user-agent-header-in-elixir-2j1</guid>
      <description>&lt;h3&gt;
  
  
  Tracking Recipient Preferences With The User Agent Header in Elixir
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;Note: this user agent header post illustrates itself using code written in Elixir. If you prefer, you can &lt;a href="https://www.sparkpost.com/blog/preferences-user-agent-header-php/"&gt;read the PHP version&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Much has been made of the relative commercial value of particular groups of people. From super consumers to influencers, &lt;a href="https://www.theguardian.com/technology/2016/nov/02/mobile-web-browsing-desktop-smartphones-tablets"&gt;iPhone users&lt;/a&gt; to desktop holdouts, learning about your recipients’ preferences is &lt;a href="http://uk.businessinsider.com/gap-android-ios-conversion-rates-revenue-per-session-shrinks-iphone-moovweb-2015-6?r=US&amp;amp;IR=T"&gt;clearly important&lt;/a&gt;. In these days of deep personalization, it’s also just nice to know a little more about your customer base. Luckily this is a pretty easy job with SparkPost message events.&lt;/p&gt;

&lt;p&gt;In this post, I’ll review the content of the &lt;code&gt;User-Agent&lt;/code&gt; header, then walk through the process of receiving tracking events from SparkPost’s webhooks facility, parsing your recipients’ User Agent header and using the results to build a simple but extensible report for tracking Operating System preferences. I’ll be using Elixir for the example code in this article but most of the concepts are transferrable to other languages.&lt;/p&gt;

&lt;h3&gt;
  
  
  SparkPost Webhook Engagement Events
&lt;/h3&gt;

&lt;p&gt;SparkPost webhooks offer a low-latency way for your apps to receive detailed tracking events for your email traffic. We’ve written previously about &lt;a href="https://www.sparkpost.com/blog/webhooks-beyond-the-basics/"&gt;how to use them&lt;/a&gt; and &lt;a href="https://www.sparkpost.com/blog/webhooks-infrastructure/"&gt;how they’re built&lt;/a&gt; so you can read some background material if you need to.&lt;/p&gt;

&lt;p&gt;We’ll be focusing on just the &lt;code&gt;click&lt;/code&gt; event here. Each time a recipient clicks on a tracked link in your email, SparkPost generates a &lt;code&gt;click&lt;/code&gt; event that you can receive by webhook. You can grab a sample click event directly from the SparkPost API &lt;a href="https://api.sparkpost.com/api/v1/webhooks/events/samples?events=click"&gt;here&lt;/a&gt;. The most interesting field for our purposes is naturally &lt;code&gt;msys.track_event.user_agent&lt;/code&gt; which contains the full User-Agent header sent by your recipient’s email client when they clicked the link.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{ "msys": { "track_event": { // ... "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36" // ... } } }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Grokking The User Agent
&lt;/h3&gt;

&lt;p&gt;Ok so we can almost pick out the important details from that little blob of text. For the dedicated, there’s &lt;a href="http://www.rfcreader.com/#rfc7231_line2082"&gt;a specification&lt;/a&gt; but it’s a tough read. Broadly speaking, we can extract details about the user’s browser, OS and “device from their user agent string.&lt;/p&gt;

&lt;p&gt;For example, from my own user agent:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Mozilla/5.0 (Linux; Android 7.1.1; Nexus 6P Build/N4F26O) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.91 Mobile Safari/537.36
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;…you can tell I’m an Android user with a Huawei Nexus 6P device (and that it’s bang up-to-date ;).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Caveat: user agent spoofing&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Some of you might be concerned about the information our user agent shares with the services we use. As is your right, you can use a browser plugin (&lt;a href="https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg"&gt;Chrome&lt;/a&gt;, &lt;a href="https://addons.mozilla.org/en-gb/firefox/addon/user-agent-switcher/"&gt;Firefox&lt;/a&gt;) or built-in browser dev tools to change your user agent string to something less revealing. Some services on the web will alter your experience based on your user agent though so it’s important to know the impact these tools might have on you.&lt;/p&gt;

&lt;h3&gt;
  
  
  Harvesting User Agents From SparkPost Tracking Events
&lt;/h3&gt;

&lt;p&gt;Alright, enough theory. Let’s build out a little webhook service to receive, process and stash user agent details for each click tracked through our SparkPost account.&lt;/p&gt;

&lt;h3&gt;
  
  
  Elixir And The Web: Phoenix
&lt;/h3&gt;

&lt;p&gt;The de facto standard way to build web services in Elixir is the &lt;a href="http://phoenixframework.org/"&gt;Phoenix Framework&lt;/a&gt;. If you’re interested in a Phoenix getting started guide, the &lt;a href="https://hexdocs.pm/phoenix/overview.html"&gt;docs are excellent&lt;/a&gt; and the &lt;a href="https://hexdocs.pm/phoenix/up_and_running.html"&gt;Up and Running guide&lt;/a&gt; in particular is a great place to start.&lt;/p&gt;

&lt;p&gt;We’ll assume you already have a basic Phoenix application and focus on adding an HTTP endpoint to accept SparkPost webhook event batches.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Plug: Composable Modules For The Web&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Elixir comes with a specification called â€˜Plug’ (&lt;a href="https://github.com/elixir-plug/plug"&gt;defined here&lt;/a&gt;) which makes it easy to build up layers of so-called middleware on an HTTP service. The simplest form of plug is a function that accepts a connection and a set of options. We’ll use this form to build up our webhook consumer.&lt;/p&gt;

&lt;h3&gt;
  
  
  Handling SparkPost Webhooks Requests
&lt;/h3&gt;

&lt;p&gt;Our first task is to create a “pipeline”, which is a sequence of transformations that a connection goes through. A pipeline in Phoenix is just a convenient way to compose a sequence of plugs and apply them to some group of incoming requests.&lt;/p&gt;

&lt;p&gt;We’ll first create a “webhook pipeline and then add plugs to it to handle the various tasks in our service. All this happens in our application’s Router module:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Create a new plug pipeline to handle SparkPost webhooks requests pipeline :webhook do
# Use the accepts plug plug :accepts, ["json"] end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can read more about Phoenix routing and plug pipelines in the &lt;a href="https://hexdocs.pm/phoenix/routing.html"&gt;routing section of the Phoenix docs&lt;/a&gt;. For now, it’s important to realize that each Phoenix application includes an endpoint module which is responsible for setting up basic request processing. This includes automatic JSON parsing, which we’ll rely on here.&lt;/p&gt;

&lt;h3&gt;
  
  
  Unpacking SparkPost Events
&lt;/h3&gt;

&lt;p&gt;Our event structure contains a certain amount of nesting which we can now strip out in preparation for consuming the tasty details inside. This is a job for our very first plug:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Define a new plug to extract nested event fields def 
unpack_events(conn, _) do first_key_fn = &amp;amp;hd(Map.keys(&amp;amp;1))   
cleanevents = conn.params["_json"] |&amp;gt; Enum.map(fn evt -&amp;gt; 
evt["msys"] end) |&amp;gt; Enum.map(fn evt -&amp;gt; evt[first_key_fn.(evt)] 
end) assign(conn, :events, cleanevents) end # Add the new plug 
to our pipeline pipeline :webhook do plug 
:accepts, ["json"] plug :unpack_events end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There is a little magic going on here. Our endpoint applies the JSON parser plug to all requests before our pipeline starts. Our &lt;code&gt;unpack_events&lt;/code&gt; plug can then rely upon the &lt;code&gt;_json&lt;/code&gt; param left on the connection JSON parser.&lt;/p&gt;

&lt;p&gt;The rest of &lt;code&gt;unpack_events&lt;/code&gt; is just extracting the contents of the &lt;code&gt;msys&lt;/code&gt; key on each event and the contents of the first key in that object. Finally, our &lt;code&gt;unpack_events&lt;/code&gt; plug stored our unpacked events on a connection param for later plugs to pick up.&lt;/p&gt;

&lt;h3&gt;
  
  
  Filtering Events
&lt;/h3&gt;

&lt;p&gt;Now lets retain just the click events (when we register our webhook with SparkPost later, we can also ask it to send only click events):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def filter_event_types(conn, types) do good_event? = 
&amp;amp;Enum.member?(types, &amp;amp;1["type"]) assign(conn, :events, 
Enum.filter(conn.assigns[:events], good_event?)) end # Apply event 
filtering after unpacking pipeline :webhook do plug :accepts, 
["json"] plug :unpack_events plug :filter_event_types ['click'] end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This plug leaves our filtered events on the &lt;code&gt;:events&lt;/code&gt; connection param. &lt;code&gt;filter_event_types&lt;/code&gt; accepts a list of types we care about.&lt;/p&gt;

&lt;p&gt;There’s a lot of detail in a single event. It &lt;em&gt;might&lt;/em&gt; be a good idea to pare things down to just the fields we care about:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def filter_event_fields(conn, kv) do pick_fields = &amp;amp;Map.take(&amp;amp;1, 
kv) assign(conn, :events, Enum.map(conn.assigns[:events], 
pick_fields)) end # JSON -&amp;gt; unpack -&amp;gt; filter on clicks -&amp;gt; extract 
user_agent fields pipeline :webhook do plug :accepts, ["json"]   
plug :unpack_events plug :filter_event_types, ['click'] plug 
:filter_event_fields, ['user_agent'] end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;After The Plug Pipeline: The Controller&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To finish up our webhook request handling, we need a &lt;em&gt;controller&lt;/em&gt; which works after the plug pipeline to process to request and produce a response for the client. Here’s a skeleton Controller:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;defmodule TrackUserAgentsWeb.ApiController do use 
TrackUserAgentsWeb, :controller def webhook(conn, _params) do     
json conn, %{"ok": true} end end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then we can wire &lt;code&gt;ApiController.webhook/2&lt;/code&gt; to our router:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;scope "/webhook", TrackUserAgentsWeb do pipe_through :webhook     
post "/", ApiController, :webhook end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When we register our web service with SparkPost as a webhook consumer, it’ll make HTTP requests to it containing a JSON payload of events. Now our service has a &lt;code&gt;/webhook&lt;/code&gt; endpoint that accepts JSON, cuts our event batch down to size and responds with a happy little “ok!”.&lt;/p&gt;

&lt;h3&gt;
  
  
  Testing Our Progress
&lt;/h3&gt;

&lt;p&gt;We can test our service by sending a test batch to it. Luckily, the SparkPost API will &lt;a href="https://developers.sparkpost.com/api/webhooks.html#webhooks-events-samples-get"&gt;generate a test batch&lt;/a&gt; for you on request.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Grab a sample webhooks event batch from the SparkPost API: Note: this step uses &lt;a href="https://curl.haxx.se/"&gt;cURL&lt;/a&gt; and &lt;a href="https://stedolan.github.io/jq/"&gt;jq&lt;/a&gt;. You can skip the jq part and remove the results key from the JSON file yourself.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;curl https://api.sparkpost.com/api/v1/webhooks/events/samples | jq .results &amp;gt; batch.json&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Start our Phoenix service:&lt;/li&gt;
&lt;li&gt;&lt;code&gt;mix phx.server&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Send our test batch to the service:&lt;/li&gt;
&lt;li&gt;&lt;code&gt;curl -XPOST -H "Content-type: application/json" -d @batch.json http://localhost:4000/webhook&lt;/code&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Parsing User-Agent
&lt;/h3&gt;

&lt;p&gt;Now we’re ready to enrich our events with new information. We’ll parse the user agent string and extract the OS using the &lt;a href="https://hex.pm/packages/ua_inspector"&gt;ua_inspector&lt;/a&gt; module. We can easily add this step to the API plug pipeline in our router:&lt;/p&gt;

&lt;p&gt;Note: If you’re following along, remember to add &lt;code&gt;ua_inspector&lt;/code&gt; as a dependency in mix.exs and configure it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def os_name(ua) do if not Map.has_key?(ua, :os) do "unknown" 
else case ua.os do %UAInspector.Result.OS{} -&amp;gt; ua.os.name 
_ -&amp;gt; "unknown" end end end def parse_user_agents(conn, _) do 
events = conn.assigns[:events] |&amp;gt; Enum.map(&amp;amp;Map.put(&amp;amp;1, 
"user_agent", UAInspector.parse(&amp;amp;1["user_agent"]))) |&amp;gt; 
Enum.map(&amp;amp;Map.put(&amp;amp;1, "os", os_name(&amp;amp;1["ua"]))) assign(conn, 
:events, events) end # JSON -&amp;gt; unpack -&amp;gt; filter on clicks -&amp;gt; extract 
user_agent -&amp;gt; filter nulls -&amp;gt; parse pipeline :webhook do plug 
:accepts, ["json"] plug :unpack_events plug :filter_event_types, 
['click'] plug :filter_event_fields, ['user_agent'] plug 
:parse_user_agents end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note: not all user agent strings will contain the detail we want (or even make sense at all) so we label all odd-shaped clicks with “OS: unknown”.&lt;/p&gt;

&lt;p&gt;Alright, now we have an array of events containing only interesting fields and with an extra “os field to boot.&lt;/p&gt;

&lt;h3&gt;
  
  
  Generating Report-Ready Summary Data
&lt;/h3&gt;

&lt;p&gt;At this point, we could just list each event and call our report done. However, we’ve come to expect some summarisation in our reports, to simplify the task of understanding. We’re interested in OS trends in our email recipients, which suggests that we should aggregate our results: collect summaries indexed by OS. Maybe we’d even use a &lt;a href="https://developers.google.com/chart/interactive/docs/gallery/piechart"&gt;Google Charts pie chart&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;We could stop there citing “exercise for the reader but I always find that frustrating so instead, &lt;a href="https://github.com/SparkPost/elixir-webhook-sample"&gt;here’s a batteries-included implementation&lt;/a&gt; which stores click events summaries in PostgreSQL and renders a simple report using Google Charts.&lt;/p&gt;

&lt;h3&gt;
  
  
  An Exercise For The Reader
&lt;/h3&gt;

&lt;p&gt;I know, I said I wouldn’t do this. Bear with me: if you were paying attention to the implementation steps above, you might have noticed several re-usable elements. Specifically, I drew a few filtering and reporting parameters out for re-use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;event type filters&lt;/li&gt;
&lt;li&gt;event field filters&lt;/li&gt;
&lt;li&gt;event “enrichment functionality&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With minimal effort, you could add, filter on and group the &lt;code&gt;campaign_id&lt;/code&gt; field to see OS preference broken down by email campaign. You could also use it as a basis for updating your own user database from bounce events with &lt;code&gt;type=bounce, fields=rcpt_to,bounce_class&lt;/code&gt; and so on.&lt;/p&gt;

&lt;p&gt;I hope this short walkthrough gave some practical insight on using SparkPost webhooks. With a little experimentation, the project could be made to fit into plenty of use cases and I’d be more than happy to accept contributions on that theme. If you’d like to talk more about the user agent header, your own event processing needs, SparkPost webhooks, Elixir or anything else, come find us on &lt;a href="http://slack.sparkpost.com"&gt;Slack&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://www.sparkpost.com/blog/user-agent-header-elixir/"&gt;Tracking Recipient Preferences With The User Agent Header in Elixir&lt;/a&gt; appeared first on &lt;a href="https://www.sparkpost.com"&gt;SparkPost&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webhooks</category>
      <category>elixir</category>
      <category>sdk</category>
      <category>metrics</category>
    </item>
  </channel>
</rss>
