rvere

How to Install All the Shopify Pixels: Facebook, Adwords, Twitter & Snapchat

Alexander LamAlexander Lam

Every second you spend without Shopify pixels is a second you’re throwing away your most precious resource – data.

Really? Data?

Yea, let me explain.

Eventually, your store will need to start advertising (if it isn’t already).

And the most effective way to advertise online isn’t by guessing your potential customers’ age, gender, location and whatever else.

The best way to advertise is to target users who performed high value actions on your store.

You can do this by watching and recording what visitors do with Shopify pixels.

Then you send that data to Facebook, Google, Snapchat and every other platform. Armed with your shop’s data, these platforms can tag their users so you can advertise to them later.

To achieve this, you need to have tracking pixels installed as soon as possible.

Everyday, you should be building up your secret weapon before you need it. Because by the time you need all this data, it’ll be too late.

What are tracking pixels and why are they so important?

Tracking pixels and conversion tags are pieces of code that sit in your website. They work silently in the background to send data about your site back to the platform that gave you the code.

The data from your Shopify pixels is usually used for 2 reasons:

  1. To provide analytics for advertisers
  2. To enable super effective ad targeting

Reason 2 is the key here. Data that gets sent back can be used to link users to their actions on your site.

This is powerful since you don’t have to guess when picking ad audiences. You can simply target your ads at users who fulfilled certain requirements on your shop.

Why you need to be building up your pixels from day 1

By the time you need the data, it’s too late to get it. That’s the problem with pixels – there’s no way to reach into the past to retrieve data that wasn’t tracked.

Your business will eventually need to focus on new ad platforms to keep growing.

But what happens when you try to advertise without past pixel data? Your ads are much less efficient.

You’re unable to retarget or make audiences that are super effective. Instead, you’re stuck guessing on things like age, gender, interests and location.

This is why you need to train your pixels from day 1. If visitors are logged in to the corresponding platform while browsing your site, their data and site actions will be recorded and stored.

How do you install tracking pixels?

In this guide, I’ll teach you how to install 4 different tracking pixels and tags from the biggest platforms. All on your Shopify store. Each one requires some custom code to track key conversion events like Add to Cart and Checkout.

Or, don’t want to go through all this trouble? Try out our app Civil Pixels:

Install every pixel in less than 2 minutes.

Start training your pixels now. Use the code tamemypixels when picking your plan for a free month.

civil pixels home graphic

Facebook Pixel

This one’s easy. Shopify recently introduced a Facebook Pixel integration for free.

First, let’s get your Facebook Pixel ID.

  1. Head over to your Facebook Events Manager.
  2. Now we’ll make or use an existing pixel:
    • If you have a Facebook pixel already: Under the pixel’s title, look for something that looks like “Pixel ID: 123456789101112”. Copy the numbers only and move on to the Shopify step!
    • If you don’t have one or want to use a new one: In the top right area of the page, you’ll see a button labeled Add Data Source. Click the button to activate a dropdown menu and select Facebook Pixel. This will bring up a popup asking you to name your pixel. Give it a name and click Create. Now close the popup. This will reveal the page below. Under your pixel’s title, you’ll see a series of numbers labeled Pixel ID. It looks like this: “Pixel ID: 123456789101112”. Copy the numbers only and move on to the next section!

Then, we’ll add your pixel’s ID to Shopify

  1. Head over to Online Store > Preferences from your Shopify admin.
  2. Scroll down to the Facebook Pixel section. Remember the Facebook ID from the previous section? Paste it in the box. Just the numbers from your ID and nothing else.
  3. Hit save and you’re done.

If you need multiple pixels, unfortunately Shopify doesn’t provide that yet. Check out our app Civil Pixels – you can install infinite Facebook pixels with the app in less than 2 clicks.

Most people should be fine with the one pixel. If you don’t know why you would need more than one, you’re probably fine without multiple.

Every other pixel and tag

Ok, for every other pixel, we’re going to need some custom code. Since Shopify doesn’t provide a native integration, it’s either that or use an app. I’ll walk you through all the code you need. If you decide you don’t want to do it yourself, head over to Civil Pixels and the app will install this all for you.

In this section, we’ll install tracking for the Twitter conversion tag, Snapchat pixel and Google Ads (AdWords) tag.

I’ll walk you through each step.

General Setup – Start Here

Before we install tracking for the 3 platforms, we’ll need to open the pages that we’ll be editing. Open a new tab for each of these sections.

Preparing to install the base tag

This is the easy part. Each pixel has something called a “Base Tag”. This is the essential code that runs on every page and tracks every page visit.

  1. Head over to your Shopify admin and click on Online Store under Sales Channels.
  2. On your current active theme, click on Actions > Edit Code.
  3. Open up theme.liquid .
  4. Find the closing head tag. Ctrl+F or Command+F and search for </head> .
  5. Everything you paste in this section will be before the closing head tag. This is very important. Place your cursor before it and hit enter to start a new line.
Preparing to install the Add to Cart code

Add to Cart tracking is the hardest thing you’ll be doing today.

This is because what you’ll do differs based on your theme. You’ll have to do a little investigative work.

Don’t worry, I’ll walk you through all of it.

  1. First you need to find your Add to Cart button’s ID. We’ll use Chrome for this. Head over to your product page and find the Add to Cart button. Right click on the button and click inspect from the popup menu.
  2. You’ll see a screen with a bunch of code – your button’s code will be highlighted. Look for the id property. It looks like id=”add-to-cart-button” but the text within the quotation marks will be different. Write down the text within the quotation marks. This is your ID. In our example it’s add-to-cart-button.
  3. Open up a new tab and head over to theme.liquid again. We got there by going to your Shopify admin and clicking on Online Store, then clicking on Actions > Edit Code.
  4. Ctrl+F or Command+F and search for </body>. This is the closing body tag, and we want to put our code before it.
  5. Place your cursor before and and paste the following code:
    {% if template contains 'product' %}
<script>
//REPLACE HERE
var atcButtonID = "replace-this";

var atcButton = document.getElementById(atcButtonID);
if(atcButton){
	atcButton.addEventListener("click", function(event) {
		var cartValue = {{ product.selected_or_first_available_variant.price }}/100;
                var productId = {{ product.selected_or_first_available_variant.id }};
                var productType = "{{ product.type }}";
                var currency = "{{ shop.currency }}";
                //PASTE AFTER HERE
	});
}
</script>
{% endif %}
  6. Where it says replace-this, replace that text with the ID you found in step 2. Keep the quotation marks in the code though.
Preparing to install the Checkout code

Tracking checkout events is not as hard as Add to Cart, and is super valuable. Let’s get started.

    1. Open up a new tab, head over to your Shopify admin and click on Settings > Checkout.
    2. Scroll down to the Order processing section and find the Additional scripts box.
    3. This is where we’ll be pasting code. Place your cursor there.

Ok, now that we have all of this prep work done, let’s retrieve our tags and place them in the right place.

How to Install the Twitter Conversion Tag

The Basics – Twitter Universal Tag
  1. First, we’ll get the code needed for universal tracking from Twitter. Head over to your Twitter Ads Manager.
  2. Log in if you haven’t yet. Then select the Tools > Conversion tracking. You’ll arrive on the conversion tracking page.
  3. On the top right area of the page, you’ll see a big button labeled Create new conversion event. Click it.
  4. This will bring you to a new page where you can create your tag.
  5. Give your tag any name. Then leave the “Select the type of conversion” area alone, this doesn’t matter for our purposes.
  6. Leave the rest of the options to their default. This should be:
    • Use a universal website tag selected.
    • ‘Include traffic that meets any of the following conditions’ should be All Website Visits.
    • ‘Specify custom attribution window’ can be anything you want, but we recommend leaving the default of 30
      Days       post-engagement and 1 Day post-view attribution.
  7. Agree to the Terms & Conditions, then click the Save conversion event button.
  8. Copy all the code in the code box that Twitter provides.
  9. Now head back to your Shopify admin. Remember where we left off in Preparing to install the base tag section? Paste your Twitter code before the closing </head> tag in theme.liquid .

That’s it! Your Twitter tag is now recording every page visit. You can target Twitter users based on which pages they’ve visited on your site.

Add to Cart Event

Now we’ll make something called a single event tag in Twitter. This lets Twitter know when a certain event has occurred. In our case, we’re going to make one for the Add to Cart event.

    1. Go back to where you made the base tag from the Twitter ads dashboard. Go to the Tools > Conversion tracking.
    2. On the top right area of the page, click Create new conversion event.
    3. Give your event a name and select Custom under Select the type of conversion.
    4. Select Use a single event website tag.
    5. Check off Create a tailored audience and hit Save conversion event.
    6. Head back to Tools > Conversion tracking. The event you just made will be in the table. Under its title, there will be a tag ID. It will look like this: Website Tag ID: abcde .
    7. Write down everything after Website Tag ID for later. In our example, that is abcde. Yours will be different.
    8. Remember that code we pasted in Preparing to install the Add to Cart code? Head back to theme.liquid and find it.
    9. Paste the following snippet of code in the line after //PASTE AFTER HERE :

      /*BEGIN TWITTER CODE*/
twttr.conversion.trackPid("replace-this", { tw_sale_amount: cartValue, tw_order_quantity: 1 });
/*END TWITTER CODE*/
    10. Replace the text replace-this with the ID we got in step 7.

Your store is now sending Add to Cart events to Twitter.

Purchase Event
  1. Go back to where you made the universal tag from the Twitter ads dashboard by: go to the Tools drop down, and click Conversion tracking.
  2. On the top right area of the page, click Create new conversion event.
  3. Give your event a name and select Purchase under Select the type of conversion.
  4. Select Use a single event website tag.
  5. Check off Create a tailored audience and hit Save conversion event.
  6. Copy the tag code Twitter gives you.
  7. Remember where we left off in Preparing to install the Checkout code? Head over to the Additional scripts box and paste the tag code.
  8. In the code you just pasted, look for a line that looks like this: <script type="text/javascript">twttr.conversion.trackPid('o0wsm', { tw_sale_amount: 0, tw_order_quantity: 0 });</script>. See tw_sale_amount: 0? Delete the 0 after tw_sale_amount and replace it with this: {{ order.total_price }}/100

Your purchases should now be tracked!

How to Install the Snapchat Pixel

The Snapchat base code
  1. To install the Snapchat pixel, we’ll begin by generating one. Head over to Snapchat Ads Manager and log in.
  2. From the top left menu, click Manage Ads > Snap Pixel.
  3. You should be on the Snap Pixel page now. Click the Set Up Pixel button to get your pixel code.
  4. Copy the pixel code that Snapchat provides.
  5. Head back over to your Shopify admin. Before the closing </head> tag in theme.liquid, paste the code that you just copied.

That’s it for this part of the Snapchat tag! This code is very important and is required for the rest of your tracking to work.

Add to Cart Event

This one is a little easier than Twitter, we don’t need to make another conversion tag. Instead, we can just activate a predefined event from Snapchat.

  1. Copy the following code snippet:
    /*BEGIN SNAPTRACK PIXEL*/
snaptr('track', 'ADD_CART', {
        'item_ids': [productId],
        'price': cartValue,
        'currency': currency,
        'item_category': productType
});
/*END SNAPTRACK PIXEL*/
  2. Paste it in a line after //PASTE AFTER HERE in the code you pasted previously from Preparing to install the Add to Cart code.
Purchase Event
  1. First, let’s get the base code again – the one we pasted in theme.liquid. Copy and paste it into the start of your Additional scripts box from Preparing to install the Checkout code.
  2. Copy the following code snippet:
    <script>
    snaptr('track', 'PURCHASE', {
        'currency': "{{ shop.currency }}",
        'price': {{ order.total_price }}/100,
        'transaction_id': {{ order.order_number }},
        'user_email': "{{ order.email }}"
    });
</script>
  3. Paste it at the end of your Additional scripts box from Preparing to install the Checkout code. Make sure it is anywhere after your Snap base code.

How to install the Google Ads (Adwords) Tag

Adding the base code and Add to Cart event

Google doesn’t give you the base code separately and will only provide it once we make an event, so I’ve grouped these two in the same section.

  1. Head over to the Google Ads dashboard.
  2. From the top menu, click on Tools > Conversions.
  3. Click the blue plus button to add a new conversion.
  4. Select Website.
  5. Give your conversion a name. I recommend ‘Add to Cart Event’.
  6. Under Category, select Other.
  7. Select Use different values for each conversion, leave everything else as the default. Hit next.
  8. Select Install the tag yourself.
  9. Installing the base tag:
    • Copy the code from the Global site tag section. This is your base tag. Go to your theme.liquid, and before the closing </head> tag, paste it.
  10. Installing the add to cart event:
    • In the Event snippet section, we’ll find our tag ID. In the code box, look for a string of characters that looks like AW-123456789/ABCdefGHIjklmnOPQrs. Note this is just an example, your tag ID is different. Write it down somewhere.
    • Copy the following code snippet and paste it after //PASTE AFTER HERE in the code from Preparing to install the Add to Cart code.
          /*BEGIN ADWORDS CODE*/
    //REPLACE HERE
    var tagId = "AW-123/abc";

    //DO NOT TOUCH BELOW HERE
    var tagSegments = tagId.substr(3).split('/');
    var conversionId = tagSegments[0];
    var conversionLabel = tagSegments[1];

    gtag('config', 'AW-'+conversionId);
    gtag('event', 'conversion', {
        'send_to': 'AW-'+conversionId+'/'+conversionLabel,
        'value': cartValue,
        'currency': currency
    });
    /*END ADWORDS CODE*/
    • See where it says AW-123/abc under //REPLACE HERE? Replace that with the tag ID we got from the Event Snippet section.
Adding the Purchase event
    1. We’re going to head over to the Google Ads dashboard again and click Tools > Conversions.
    2. Click the blue plus button to add a new conversion and select Website.
    3. Name your conversion something like ‘Purchase Event’.
    4. Under Category, select Purchase/Sale.
    5. Select Use different values for each conversion, leave everything else as the default. Hit next.
    6. Select Install the tag yourself.
    7. Copy the code from the Global site tag section. Paste that in the beginning of your Additional Scripts box that we found in Preparing to install the Checkout code.
    8. Scroll down to the Event snippet section. Here, we’ll find our tag ID. In the code they give you, look for a string of characters that looks like AW-123456789/ABCdefGHIjklmnOPQrs. Please note that this is just an example, your tag ID is different. Write it down somewhere.
    9. Copy the following code snippet and paste it at the end of your Additional Scripts box.
      <script>
    //REPLACE HERE
    var tagId = "AW-123/abc";

    //DO NOT TOUCH BELOW HERE
    var tagSegments = tagId.substr(3).split('/');
    var conversionId = tagSegments[0];
    var conversionLabel = tagSegments[1];

    gtag('config', 'AW-'+conversionId);
    gtag('event', 'conversion', {
        'send_to': 'AW-'+conversionId+'/'+conversionLabel,
        'value': {{ order.total_price }}/100,
        'currency': "{{ shop.currency }}",
        'transaction_id': {{ order.order_number }}
    });
</script>
    10. See where it says AW-123/abc under //REPLACE HERE? Replace that with the tag ID we got from the Event Snippet section.

I don’t want to install this myself – what do I do?

You may have figured out by now that I didn’t write this article just to help you advertise better (though that’s my biggest priority).

I wanted to show you how pixels work so you may be tempted to try out our app – Civil Pixels.

If you don’t want to go through all of this work, you’d usually have to pay for a different app for each of these pixels. That could cost you over $50/month – way too much to pay for tracking pixels.

With Civil Pixels, you can install every pixel and tag with a single app. It also makes installing any future code on your site super easy.

Install every pixel in less than 2 minutes.

Start training your pixels now. Use the code tamemypixels when picking your plan for a free month.

civil pixels home graphic

How do I know if my pixels are working?

Luckily, almost every platform with a tracking tag will provide a Chrome extension to verify the pixel is firing. Make sure your ad blocker is off and download these Chrome extensions to test your pixels:

Something not working? If you don’t want to go through the hassle of troubleshooting, check out our app Civil Pixels for Shopify. We’ll install all of these pixels for you.

Otherwise, each of these tags and pixels have great documentation online! They also have support teams that love to help.

Important notes – don’t forget to cover your bases

After you have your tracking in place, make sure you have your legal bases covered. Different jurisdictions have different laws so make sure you comply with them. For example, you may have to update your privacy policy and site terms. Or ask for permission to track. I’d recommend consulting your lawyer, we can’t provide any legal advice here.

What Next?

When you’re making your ads, you’ll want to make sure the landing page they link to actually converts. You can do that by matching the messaging on your landing page to the ad. This is called “Message Match.”

The best way to Message Match is to use a dynamic landing page. Here’s how to make a dynamic landing page of your own!

Guides
Comments 0
There are currently no comments.