Facebook pixel

.travis.yml

@@ -1,11 +1,9 @@
 language: ruby
 sudo: false
 rvm:
-  - 1.9.3
   - 2.0.0
   - 2.1.5
   - 2.2.3
-  - jruby
 gemfile:
   - Gemfile.rails-3.2
   - Gemfile.rails-4.2

README.md

@@ -254,25 +254,36 @@ To add events or variables to the dataLayer from the server side, just call the
 
 ### Facebook
 
-* `custom_audience` - adds the [Custom audience](https://developers.facebook.com/docs/reference/ads-api/custom-audience-website-faq) segmentation pixel
+* `Facebook Pixel` - adds the [Facebook Pixel](https://www.facebook.com/business/help/952192354843755)
 
-#### Conversions
+Use in conjunction with the [Facebook Helper](https://developers.facebook.com/docs/facebook-pixel/pixel-helper) to confirm your event fires correctly.
 
-To track [Conversions](https://www.facebook.com/help/435189689870514) from the server side just call the `tracker` method in your controller.
+First, add the following to your config:
+
+```ruby
+  config.middleware.use(Rack::Tracker) do
+    handler :facebook, { id: 'PIXEL_ID' }
+  end
+```
+
+#### Standard Events
+
+To track Standard Events from the server side just call the `tracker` method in your controller.
 
 ```ruby
   def show
     tracker do |t|
-      t.facebook :track, { id: '123456789', value: 1, currency: 'EUR' }
+      t.facebook :track, { type: 'Purchase', options: { value: 100, currency: 'USD' } }
     end
   end
 ```
 
 Will result in the following:
 
 ```javascript
-  window._fbq.push(["track", "123456789", {'value': 1, 'currency': 'EUR'}]);
+  fbq("track", "Purchase", {"value":"100.0","currency":"USD"});
 ```
+
 ### Visual website Optimizer (VWO)
 Just integrate the handler with your matching account_id and you will be ready to go
 

lib/rack/tracker.rb

@@ -16,6 +16,7 @@
 require "rack/tracker/google_tag_manager/google_tag_manager"
 require "rack/tracker/google_adwords_conversion/google_adwords_conversion"
 require "rack/tracker/facebook/facebook"
+require "rack/tracker/facebook_pixel/facebook_pixel"
 require "rack/tracker/vwo/vwo"
 require "rack/tracker/go_squared/go_squared"
 require "rack/tracker/criteo/criteo"

lib/rack/tracker/facebook/facebook.rb

@@ -1,17 +1,7 @@
 class Rack::Tracker::Facebook < Rack::Tracker::Handler
   class Event < OpenStruct
     def write
-      options.present? ? type_to_json << options_to_json : type_to_json
-    end
-
-    private
-
-    def type_to_json
-      self.type.to_json
-    end
-
-    def options_to_json
-      ", #{self.options.to_json}"
+      ['track', self.id, to_h.except(:id).compact].to_json
     end
   end
 
@@ -24,4 +14,5 @@ def render
   def self.track(name, *event)
     { name.to_s => [event.last.merge('class_name' => 'Event')] }
   end
+
 end

lib/rack/tracker/facebook/template/facebook.erb

@@ -1,20 +1,40 @@
 <script type="text/javascript">
-  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
-  n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
-  n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
-  t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
-  document,'script','//connect.facebook.net/en_US/fbevents.js');
-  fbq('init', '<%= options[:id] %>');
-  fbq('track', "PageView");
+  (function() {
+    var _fbq = window._fbq || (window._fbq = []);
+    if (!_fbq.loaded) {
+      var fbds = document.createElement('script');
+      fbds.async = true;
+      fbds.src = '//connect.facebook.net/en_US/fbds.js';
+      var s = document.getElementsByTagName('script')[0];
+      s.parentNode.insertBefore(fbds, s);
+      _fbq.loaded = true;
+    }
+  })();
+  window._fbq = window._fbq || [];
+
+</script>
+
+<% if options[:custom_audience] %>
+<script type="text/javascript">
+window._fbq.push(["addPixelId", "<%= options[:custom_audience] %>"]);
+window._fbq.push(["track", "PixelInitialized", {}]);
 </script>
+
 <noscript>
-  <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<%= options[:id] %>&ev=PageView&noscript=1"/>
+  <img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?id=<%= options[:custom_audience] %>&amp;ev=PixelInitialized">
 </noscript>
+<% end %>
 
 <% if events.any? %>
-  <script type="text/javascript">
-    <% events.each do |event| %>
-      fbq("track", <%= event.write %>);
-    <% end %>
-  </script>
+<script type="text/javascript">
+<% events.each do |event| %>
+window._fbq.push(<%= event.write %>);
+<% end %>
+</script>
+
+<noscript>
+  <% events.each do |event| %>
+  <img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=<%= event.id %>&amp;value=<%= event.value %>&amp;currency=<%= event.currency %>">
+  <% end %>
+</noscript>
 <% end %>

lib/rack/tracker/facebook_pixel/facebook_pixel.rb

@@ -0,0 +1,27 @@
+class Rack::Tracker::FacebookPixel < Rack::Tracker::Handler
+  class Event < OpenStruct
+    def write
+      options.present? ? type_to_json << options_to_json : type_to_json
+    end
+
+    private
+
+    def type_to_json
+      type.to_json
+    end
+
+    def options_to_json
+      ", #{options.to_json}"
+    end
+  end
+
+  self.position = :body
+
+  def render
+    Tilt.new( File.join( File.dirname(__FILE__), 'template/facebook_pixel.erb') ).render(self)
+  end
+
+  def self.track(name, *event)
+    { name.to_s => [event.last.merge('class_name' => 'Event')] }
+  end
+end

lib/rack/tracker/facebook_pixel/template/facebook_pixel.erb

@@ -0,0 +1,24 @@
+<script type="text/javascript">
+  if (typeof fbq == 'undefined') {
+
+    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+    n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
+    n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
+    t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
+    document,'script','//connect.facebook.net/en_US/fbevents.js');
+
+    fbq('init', '<%= options[:id] %>');
+    fbq('track', "PageView");
+  }
+</script>
+<noscript>
+  <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<%= options[:id] %>&ev=PageView&noscript=1"/>
+</noscript>
+
+<% if events.any? %>
+  <script type="text/javascript">
+    <% events.each do |event| %>
+      fbq("track", <%= event.write %>);
+    <% end %>
+  </script>
+<% end %>

lib/rack/tracker/version.rb

@@ -1,5 +1,5 @@
 module Rack
   class Tracker
-    VERSION = '1.1.0'
+    VERSION = '1.1.6'
   end
 end

spec/handler/facebook_pixel_spec.rb

@@ -0,0 +1,61 @@
+RSpec.describe Rack::Tracker::FacebookPixel do
+  # describe Rack::Tracker::FacebookPixel::Event do
+
+  #   subject { described_class.new({id: 'id', foo: 'bar'}) }
+
+  #   describe '#write' do
+  #     specify { expect(subject.write).to eq(['track', 'id', {foo: 'bar'}].to_json) }
+  #   end
+  # end
+
+  def env
+    {}
+  end
+
+  it 'will be placed in the body' do
+    expect(described_class.position).to eq(:body)
+    expect(described_class.new(env).position).to eq(:body)
+  end
+
+  describe 'with id' do
+    subject { described_class.new(env, id: 'PIXEL_ID').render }
+
+    it 'will push the tracking events to the queue' do
+      expect(subject).to match(%r{fbq\('init', 'PIXEL_ID'\)})
+    end
+
+    it 'will add the noscript fallback' do
+      expect(subject).to match(%r{https://www.facebook.com/tr\?id=PIXEL_ID&ev=PageView&noscript=1})
+    end
+  end
+
+  describe 'with events' do
+    def env
+      {
+        'tracker' => {
+        'facebook_pixel' =>
+          [
+            {
+              'type' => 'Purchase',
+              'class_name' => 'Event',
+              'options' =>
+                {
+                  'value' => '23',
+                  'currency' => 'EUR'
+                }
+            }
+          ]
+        }
+      }
+    end
+    subject { described_class.new(env).render }
+
+    it 'will push the tracking events to the queue' do
+      expect(subject).to match(%r{"track", "Purchase", \{"value":"23","currency":"EUR"\}})
+    end
+
+    it 'will add the noscript fallback' do
+      expect(subject).to match(%r{https://www.facebook.com/tr\?id=&ev=PageView&noscript=1})
+    end
+  end
+end

spec/integration/facebook_pixel_integration_spec.rb

@@ -0,0 +1,17 @@
+require 'support/capybara_app_helper'
+
+RSpec.describe "Facebook Pixel Integration" do
+  before do
+    setup_app(action: :facebook_pixel) do |tracker|
+      tracker.handler :facebook_pixel, { id: 'PIXEL_ID' }
+    end
+    visit '/'
+  end
+
+  subject { page }
+
+  it "embeds the script tag with tracking event from the controller action" do
+    expect(page).to have_content("fbq('init', 'PIXEL_ID');")
+    expect(page.body).to include('https://www.facebook.com/tr?id=PIXEL_ID&ev=PageView&noscript=1')
+  end
+end

spec/support/metal_controller.rb

@@ -29,6 +29,13 @@ def facebook
     render "metal/index"
   end
 
+  def facebook_pixel
+    tracker do |t|
+      t.facebook_pixel :track, { id: 'conversion-event', value: '1', currency: 'EUR' }
+    end
+    render "metal/index"
+  end
+
   def google_analytics
     tracker do |t|
       t.google_analytics :ecommerce, { type: 'addTransaction', id: 1234, affiliation: 'Acme Clothing', revenue: 11.99, shipping: 5, tax: 1.29 }