The Facebook Pixel and SuperTag

 

This article describes how to set up the Facebook Pixel with the Salesforce DMP Tag Management System, SuperTag. With the Facebook Pixel, you can create Facebook Custom Audiences from visitors to your web site. If you pass in event information via the Facebook Pixel, you can also use that data to create a specialized Custom Audience in Facebook. SuperTag facilitates this by making it easy to deploy your Facebook Pixel, and by providing a template for events which allow you to decide what information you want passed to Facebook and when.

To deploy the Facebook Pixel, you should follow step 1 and step 2 below. If you would also like to pass in View Content events to Facebook, you would also follow step 3.

 

Step 1. Get The Facebook Pixel Code

Facebook has a Help Center article on their Pixel, but we will also go over the steps for what you need to do here. The Facebook Pixel code is unique to your Facebook Business Account, so you need to get a copy of the appropriate code from Facebook. To do so, log in to your Facebook Business Account. Navigate to the Pixels tab in Events Manager by clicking on Pixels in the Facebook Business Center main menu.

 

Facebook Business Center menu

Figure 1. Pixel listing in the Facebook Business Center main menu

If you have never set up your Facebook Pixel, click the green Create A Pixel button and follow the steps for creating your Pixel. If you have already created your Facebook Pixel, click on the green Set Up Pixel button. To get the Pixel code, you want to select the Manually Install the Code Yourself option for setting up your pixel. Even though you will be using the Salesforce DMP Tag Manager to deploy your Pixel, you don't want to select the Tag Manager option because that option only supports the Tag Managers Facebook has integrated with so far.

 

The manual install option

Figure 2. The Manually Install the Code Yourself option

When you select the manual option, Facebook will present you with a screen with two steps in it. The first step will say to locate the header code for your website. If you scroll down, step two will say to copy the entire pixel code and paste it in the website header. To copy the code, move your mouse over the code and then click to copy it to your clipboard. If you'd like to save the code on your computer, you can open a file, paste the code into that file, and save the file.

The Facebook pixel code itself will look like:

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

The 'yyyyyyyyyyyyyyyy' string in the example code would be replaced with the appropriate ID for your Facebook Business Account.

 

Step 2. Add The Facebook Pixel Tag in SuperTag

Now that you have the Facebook Pixel code, you need to deploy it on your web site through SuperTag. To do so, log in to the Salesforce DMP console and select SuperTags from under Manage in the main menu. We will walk through the steps here, but there is also a SuperTag User Guide in the DMP Help Center as well.

 

SuperTag in the Console menu

Figure 3. SuperTag in the DMP console menu

If you don't see SuperTag as an option under the Manage menu, then it means your DMP user account has not been set up as an administrator for SuperTag. You may need to work with a SuperTag administrator from within your company to complete the process, or with your Salesforce DMP Solutions Team. You can reach out to your Salesforce Team for more help.

If your account is set up with access to SuperTag, clicking on SuperTags in the main menu will take you to the Tag Listing screen. To create a new tag for the Facebook Pixel, click on the blue + Create Tag button. This will take you to a screen which allows you to either use a SuperTag template to create a new tag, or to create a custom tag. For the Facebook Pixel, you want to click on the Custom Tag option.

 

Custom tag option

Figure 4. The Custom Tag option

You will be presented with the Configure screen for the tag. The first field in the screen is for the tag name, which will be displayed in the Tag Listing screen. Enter a name that would make it easy for you and your team to identify the purpose of the tag. The next field is a checkbox labeled Data Collection Tag. This should be checked on by default, and you want to keep this checked  because this checkbox indicates to the DMP that if a visitor has opted out of data collection, this particular tag should not be fired. It helps keep you compliant with data privacy laws.

 

Tag configuration screen

Figure 5. Top of the SuperTag configuration screen

The next field two fields allow you to choose where you want the Facebook Pixel fired. The All Sites checkbox will have the tag fired on all of the Sites you have configured in the DMP as a Site Tag (versus a Media Tag). It's important to know that Sites here means Site in the DMP, not web site. If you have configured one Site in the DMP, and then used a Control Tag generated for that Site on two or more web sites, a tag set up to fire to that single Site will be fired on all of the web sites using that same Control Tag.

If you don't want the Facebook Pixel to fire on all of the Sites in the DMP, keep the All Sites checkbox unchecked, and then select the appropriate sites from the Sites select list. The next two fields, the From and To fields, are optional and let you select a start and an end date for firing the tag. If you want to start firing the tag as soon as possible, and don't want to stop firing it, just leave these two fields blank.

The next field is another optional field, Labels. You can use this field to label the tag to make it easier to organize and find the tags in SuperTag.

Scroll down the page, and you will see the delivery configuration section of the page. The first field in this section is the Delivery Method field, with options for HTML (on page), HTML (via iFrame), or JavaScript. With the Facebook Pixel code, you should keep the default selected option for HTML (on page). The next field is Delivery Timing with options for Immediately, After content loads, and After page. The After page option is selected by default, and is appropriate for the Facebook Pixel tag. Next is the Tag Target field, which is mainly used when the tag you are deploying returns something that you want visible on the page, and want to target to a particular <div> tag. For the Facebook Pixel, you should keep this blank.

 

Example of Facebook Pixel code in the HTML field

Figure 6. Example of Facebook Pixel code in the HTML field

The next field is labeled HTML, if you selected the HTML (on page) option for the Delivery Method. In this text box, you want to paste the Facebook Pixel code you retrieved from the Facebook in Step 1. The final field is a Notes field where you can add in any notes you'd like about the tag as well. Once you've filled in all of the appropriate fields, click the blue Continue button to set up any rules for when to fire the tag.

In the Set Rules screen, you can create rules that govern when the Facebook Pixel should be fired. To add a rule, click on the + Add Rule button and you'll be given the options to create a new rule or use any existing rule groups. With a new rule, you first select an operator for the rule of AND, AND NOT, or OR. Then you choose a rule type like whether or not a certain data attribute has to be on the page, or if a visitor is a member of a certain audience. Then you select the appropriate operator for the rule type, and enter the value you want matched either through a select list or a free from field. Once you're done adding in the rules for when the tag can be fired, click on the blue Continue button.

The last step is to review the tag details, and save the tag by clicking the blue Save button. If you are a SuperTag administrator, you will be able to publish the tag. If a different person is the SuperTag administrator, then they will need to review and approve your new Facebook Pixel tag before it goes live. Once the tag is approved and published, it may take up to 20 minutes before you will see it live on your web site due to cacheing.

 

Step 3. Add the View Content Event Tag for Facebook in SuperTag

In addition to firing the standard Facebook Pixel, SuperTag can also be used to pass along event information into Facebook. If you would like to learn more about Facebook Events, you can read the Pixel Events section of the Facebook Developers help documentation. Currently the DMP supports the View Content event by offering a library tag in SuperTag.

To deploy a Facebook View Content tag, you want to start on the Tag Listing screen, just as you did in Step 2 for the Facebook Pixel tag. If you're not on this screen, you can go there by selecting SuperTags from under the Manage main menu. To create the new tag, you click on the + Create Tag button, and you'll be presented with template library list. You can scroll down the page, or if you start typing Facebook into the search field on this screen, the templates that include "Facebook" in the name will be the only ones displayed on the screen. You want to click on the Select button for the Facebook ViewContent Template library template.

 

Facebook template listing

Figure 7. Facebook ViewContent Template Listing

After you've selected the template, you will be shown the configuration screen for the tag. The options here are similar to what was shown for the custom tag code for the Facebook Pixel in Step 2. You once again want to enter in a name for the tag, keep the Data Collection Tag checkbox checked, and enter in the appropriate options for the sites to fire the tag on. You can also enter a start and stop date or a label for the tag, if you choose to.

The next field, labeled Name Mapping, is new. This field lets you define what value you want passed in to Facebook as the Content Name for the View Content Event. For example, if you were having the View Content tag fire on product pages for hiking gear on your website, then you might enter in HikingGear as the value to pass in to Facebook. Then you could go in to Facebook, and create a Facebook Custom Audience of all of the people who have viewed hiking gear product pages on your site by just saying the Content Name should match HikingGear for the View Content event.

 

ViewContent template fields

Figure 8. ViewContent Template Fields

Since there can be different values that want to pass in to Facebook, we made this field a mapping field where you can enter different values and map them to different IDs. This way, if you wanted to pass HikingGear for one set of products and FirstAid for another, you don't have to create two separate tags in SuperTag. Instead you can map both HikingGear and FirstAid to the appropriate IDs in this single field, and SuperTag will be able to identify which value is the appropriate one to pass to Facebook. An ID is mapped to a particular value by putting a colon (:) between the ID and the value. Multiple IDs and their values are entered into this single field by putting commas (,) between each ID:value pair. We recognize that this might be a bit difficult to follow as a written instruction, so for more help please don't hesitate to reach out to your Salesforce DMP Solutions Team.

Once you have entered in the Name Mapping you want to use, you would then select the appropriate delivery options, just as with Step 2. In this case, however, you don't need to worry about adding in any actual HTML or JavaScript code, since the template itself creates the code. Click on the Continue button, and you will be taken to the Set Rules screen.

As with the Facebook Pixel, you can define whatever rules you would like for when SuperTag should fire the ViewContent tag. After defining those rules, you click on the Continue button to see the Tag Review screen. If everything meets with your approval, simply click on the Save button and you're done!

 

Validation

It's always a good idea to validate a new tag deployment. One way to do this with Facebook tags is to use the Facebook pixel helper browser extension. This browser extension can validate for you that the tags are firing correctly for Facebook. More information about Facebook's browser extension can be found in their Help Center here: https://www.facebook.com/business/help/198406697184603

 

 

Creating a Custom Audience in Facebook

After you have deployed the Facebook Pixel, you can create Facebook Custom Audiences using the pixel data in Facebook.  To do so, log in to your Facebook Business Account, and go to the Facebook Audiences Manager by selecting Audiences in the main menu.  Click on the blue Create Audience button, and you will be presented with a drop down list of audience types.  Click on the Custom Audience type, and a Create a Custom Audience overlay screen will be presented to you.

This screen lets you choose the data source for your audience.  Click on the Website Traffic option, and you will be presented with a new overlay screen where you can define the rules for the audience.  In the center of the form, there will be a select list where the initial selected value is "All website visitors".  If you click on that select list, you will see the list of available options.  Once Facebook has seen the Facebook Pixel fires, the PageView event will become available - as will the ViewContent event, if you deployed a ViewContent tag. 

You use this form to define whatever rules you want for the Facebook Custom Audience.  If you want to define an audience by the content name passed over in a ViewContent tag, you would select the ViewContent option in the select list.  Then click the Refine by link, and select URL/Parameter from the list of options presented to you.   This will cause additional fields to be added to the form.

By default, URL will be used as the option for refining the audience.  If you click on URL, you will see a list of available Parameters.  Change the selection from URL to the content_name parameter, and then select the appropriate operator for your rule.  In the text field, you can add one or more of the values that you defined in the Name Mapping field from the Facebook ViewContent template.  Finally, just enter a name for the audience and click the Create Audience button to save it.  Facebook will add people to this Custom Audience as they see the conditions for your rules are met.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.