Intro

I remember how I first learned about Facebook’s (then new) Dynamic Product Ads. I was sitting on the living room floor playing with my two-year-old daughter when I heard a “Ha!” from the other room.

“What’s up, honey?” I shouted.

My wife entered the room with an expression of mild excitement on her face.

“What a coincidence!” she said. “Just yesterday I was looking for this dress with that thing on the side that looks kinda like the thing that X was wearing when we went to Z, remember?”

“Err… well I guess I… wasn’t that…”

“Well, I found it in that online store and was thinking about buying it but it seemed a bit pricey and then I looked for something else and I forgot about it. And now guess what! I just discovered a promotion on Facebook from that exact same shop for that exact same dress: Five percent discount plus free shipping!”

“Really? Mhmm… that is… mhmm… that is really, really cool!”

“I know, right? I mean I really love the color and the promotion was about to expire…”

“Really cool! I didn’t know you could do remarketing at such a level on Facebook. I wonder how they do it. I’ll have to…”

“…I bough it!”

“That’s great! Would you mind looking after the baby for a sec?”

Two hours later I was running my first remarkting campaign on Facebook using Dynamic Product Ads. And we run them for most of our clients these days because they tend to work really, really well.

We even developed a Shopify App to automatically sync your store with Facebook. That way, when a product changes, gets added or goes out of stock your campaigns adjust accordingly without you having to do anything!

Sound great, right? Do you want to run fully automated facebook product ads as well? Good news: The App is free! Let me show you how to use it.

I’ll assume you use Shopify’s ecommerce software.

Also, please be aware that things will get technical. You might want to contact your developer or online marketer if you don’t feel comfortable doing it yourself. (If you are looking for someone to help, drop me a line at ten.yfixelf@yfipohs, we might be available for hire.)

Setting up Facebook Dynamic Product Ads for your Shopify store

Dynamic Product Ads are perfect for retargeting: You can dynamically serve ads on Facebook based on the specific product someone viewed in your store. Let’s set up some dynamic product ads right now!

With our first campaign we’ll retarget shopping cart abandoners. That is, users who visited one of your product pages or placed an item in their shopping cart but didn’t purchase will be served an ad that features that specific product.

Let’s start…

Setup your Facebook ads account

First we need to create a Custom Audience on Facebook.

(Attention, rant follows: There are multiple ways and tools to create a Custom Audience on Facebook and to manage ads in general. Facebook is doing a decent job of keeping me in a permanent state of frustration and annoyance by constantly changing its tools and sprinkeling new bugs here and there every now and then. As a result I’d rather not write a summary on how to set up this stuff. It’s not hard to do, it’s just hard to maintain an up-to-date instruction about how to do it.)

We start by setting up a business manager account. To do that go to http://business.facebook.com and follow the instructions. You also need to have a Facebook Page associated to represent your business in peoples’ news feeds.

After that we create a custom audience. The Facebook help page on how to create a Custom Audience should help you get started.

Add Facebook’s Custom Audience pixel to your Shopify Theme DEPRECATED!

UPDATE: This section is obsolete. Shopify now has a built-in setting to add the Facebook Pixel to your store.

Shopify Facebook Pixel Integration

If you are using this setting you can skip to the section on how to create your product feed.

Change the theme.liquid file to initialize the pixel on every page view

First obtain the pixel code (see this instruction).

It should look like this

<!-- Facebook Pixel Code -->
<script>
!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');
// Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID');
fbq('track', 'PageView');
</script>
<-- Insert Your Facebook Pixel ID below. --> 
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=FB_PIXEL_ID&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

You need to run this code on every page view. To achieve this add it between the <head> and the </head> in the theme.liquid file that you’ll find inside the layout folder of your shopify theme (Don’t forget to insert your facebook Pixel ID in the above snippet or better use the one facebook provided for you).

Next we need to add a minimum of three facebook tracking events to our website: ViewContent, AddToCart, Purchase

You can find out more about those events in Facebook’s API Docs on Product Audiences.

Change the product.liquid file to trigger the ViewContent and AddToCart event

The following code should be placed at the end of your product.liquid file that you will find in your theme’s template folder. But don’t do it just yet. We’ll need to tweak it a bit first.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script>
fbq('track', 'ViewContent', {
  content_ids: ['shopify_{{ product.id }}_{{ product.variants.first.id }}'],
  content_type: 'product'
});

// Insert Your Add-To-Cart Button's ID below.
$('#ADD_TO_CART_BUTTON_ID').bind( 'click', function(){

  // Change the line below to whatever is needed to extract the selected variants
  // ID, e.g.: var variant_id = $("form").first().serializeArray()[0]["value"];
  var variant_id = YOUR_CODE_HERE;

  fbq('track', 'AddToCart', {
    content_ids: ['shopify_{{ product.id }}_' + variant_id],
    content_type: 'product'
  });
});
</script>

Two things are worth explaining in the above snippet.

ID Format

In line 4 we create a unique ID for the product variant being viewed by the user and put it into the content_id variable. This ID must have the following format: shopify_<PRODUCTID>_<VARIANTID>, e.g. shopify_284197941_670889949.

It is important that you use this exact format because it is used by the App that we’ll later use sync our store’s products with Facebook.

Customize line 9 and 13 to add the AddToCart event

This is where things get a bit messy. Unfortunately there is no general way to achieve this with every theme. You will have to dig into your theme’s code and adjust it to your needs. We need to do two things.

Find a selector for your buy button:

The code snippet above uses jQuery to fire a javascript function whenever a visitor clicks the “Add to cart” button on your product page. You’ll need to change #ADD_TO_CART_BUTTON_ID on line 9 in the snippet to a valid jQuery selector that identifies the button on your page.

Provide the Id of the product variant that is being added to the cart:

There are many ways the “add to cart” functionality can be implemented in a shopify theme. Some themes submit a simple form in which case you can extract the variant ID from that form. (It might be a good idea then to include a slight (< 200ms) delay before the form is submitted and a new page loaded so that the tracking calls can reach facebook’s server before then.)

Some shopify themes use Ajax (e.g. with Shopify’s Ajax API) for the “add to cart” button. In that case you’ll have too hook into the existing javascript callback for that button.

Change the checkout code to trigger the Purchase event

The checkout page is special. We cannot simply edit a liquid file to change it. Instead we have to use shopify’s admin interface to add additional content & scripts.

  1. From your Shopify admin, click Settings
  2. Click Checkout
  3. Scroll down to the “Order processing” section. Near the bottom of this section you will find a field labeled “Additional content & scripts”. Enter the following code snippet in this field
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{% if first_time_accessed %}

<script>
!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');
// Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID');
fbq('track', 'Purchase', {
  content_ids: [{% for item in order.line_items %}'shopify_{{ item.product.id }}_{{ item.variant.id }}',{% endfor %}],
  content_type: 'product',
  value:'{{ order.subtotal_price | money_without_currency }}',
  currency:'{{shop.currency}}'
});
</script>

{% endif %}

Create a always up-to-date product feed of your store’s inventory

To connect your store’s product catalog to facebook, install the free Facebook Product Feed App. Within the app you can find the URL of your product feed. It looks like this:
http://your-store.myshopify.com/a/feed/v2/facebook.rss.
Copy that url to your clipboard as you’ll need it in the next step.

If you are using Shopify’s built-in Facebook pixel integration, make sure to check the corresponding setting in your Facebook Product Feed App’s admin dashboard. Shopify Facebook Pixel setting

Create a product catalog and upload the product feed

Log into the facebook business manager and create a product catalog. See Facebook’s help page on how to create a product catalog in Business Manager for instructions.

When you reach the point in the instructions where you should upload a product feed, use the URL you copied in the previous step as the Feed URL for auto-upload. Leave all other fields set to their defaults except set the “Upload Frequency” with which you want to sync your product feed to “daily” resp. the shortest available frequency.

Test the pixel

Facebook provides a troubleshooting tool, the FB Pixel Helper, that helps you validate your Custom Audience Pixels. It is available as a Chrome extension (download here).

  • Visit the homepage and use the Helper to verify that the Custom Audience Pixel is loaded successfully.
  • Visit a product page and verify that a “ViewContent” event is being tracked with content_type: product and content_ids: ["VID"] if you are using Shopify’s built-in setting. Otherwise it will be content_ids: ["shopify_PID_VID"] (with PID being the id of the currently viewed product and VID that of the currently viewed variant).
  • Add the product to the shopping cart (e.g. by clicking a “buy” button of some sort) and verify that the AddToCart event is being triggered.
  • Make a test purchase and on the thank-you page verify that a “Purchase” event is being tracked with the correct values.

Create a dynamic product ad campaign

We’re almost done. You can now create the ads. Make sure you have supplied a valid payment method and open the Power Editor.

What follows is a rough and incomplete description – just to give you the idea. There are to many options to go into detail.

  1. Create a new Campaign
  2. Set its objective to “Product Catalog Sales”
  3. Create a new ad set within your campaign
  4. Edit the set and choose the default product set or create a new one
  5. Set your daily budget (e.g. 10$)
  6. Choose “Added to cart” as your audience “Include Behavior”
  7. Choose “Purchased product” as your audience “Exclude Behavior”
  8. Create an new ad
  9. Choose your Facebook page
  10. Create the ad with the ad builder. Here you can include the dynamic product information from the catalog.
  11. Under Tracking, select “Track all conversions from my Custom Audience pixel”

Congratulations, you did it! Upload the changes and watch your ads appear on Facebook!

I hope you found this guide helpful. If you have any feedback I would love to hear from you. You can send me a mail to ten.yfixelf@yfipohs or reach me on twitter @dommmel. Thanks, take care!

Troubleshooting the Shopify App

If you run into problems using the Shopify App Facebook Product Feed (by Flexify) please have a look at the Troubleshooting & FAQ page.