Adding Facebook Pixels and Google Tag Managers

Purpose: 

The purpose of this walkthrough is to help you add Facebook Pixels and Google Analytics to your instance.

Pre Requisites:

Google Tag Managers

Facebook Pixels

Google Analytics

Webforce Account

Webforce is capable of storing a variety of code pixels, this fragments of code will be useful whenever we need to add a new plugin or when a library needs to be loaded either on specific pages or in all pages related to a domain.

In order to store a new Pixel we need to navigate to the settings menu and click on the Pixels menu.

Open

The next step is to create a name that will identify this pixel, after that in the select menu a list of default integrations is presented. Webforce has an integration with the following services.

• Google Tag Manager

• Facebook Pixel

• Google Analytics

In addition to the services listed above if a custom fragment of code needs to be added, the Custom option listed is the way to go.

Setup Google Tag Manager

If there is a previously collection of tags that has been created and we want to be loaded in our Webforce instance, first of all we need to visit our Google Tag Manager account and copy the container id, value that is located in the main page of our account right, top side of the screen.

Open

once the value has been copied to the clipboard the Google Tag Manager Container ID option from the list needs to be selected, and we paste the id in the last input.
Additionally we can check the Google Analytics and Facebook pixel options, these last two checks are completely optional and when enabled means that both integrations (fragments of code) are present in our collection of tags.

Setup Facebook Pixel Through Google Tag Manager

As described in the section above, we can set up our google tag manager pixel for reporting events to Google Analytics, however Webforce is also capable to report events to a Facebook pixel. If you already have your Facebook pixel configured through your google tag manager and you want to report events from Webforce please click on the Facebook Pixel check to activate this skill.

The Facebook integration offered by Webforce is prepared for sending events through the Conversion API service too. If you want to enable this service it is required to configure a Facebbok code snippet outside of google tag manager. Please refer to this Facebook Conversion API (CAPI) guide

Setup Facebook Pixel (Not using google tag manager)

Facebook pixel is a fragment of code that will report a series of default events to the administration panel in our facebook page. An easy way to integrate this pixel in a website is by copying a fragment of javascript code and pasting it in the desired website; however Webforce has en easier way to achieve the same and load the facebook pixel. First we need to get our Facebook Pixel ID located in the Facebook Events Manager, once there we’ll find the pixel code in the right top side of our screen.

We need to copy this value, then go back to our Webforce instance and select the Facebook Pixel tag option from the list, we create a name for the tag, we paste the pixel id and click on save.

Setup Google Analytics (Not using google tag manager)

Similarly to Setting up a facebook pixel, Webforce has a tag that is able to load the Google Analytics Integration. As described in the Meet the next generation of Google Analytics document, on July 1, 2023 google will report all the events to the new Google Analytics 4 version, this version is actually replacing Universal analytics; that is why Webforce uses this version when reports events to the analytics service of google.

In order to setup this integration we first need to visit our Google Analytics Panel, once there we will click on the left sidebar over the Admin option, this will display many options but we need to click on the setup assistant.

From the Setup Assistant we’re going to click on the Tag Installation option and a menu of options will be shown to us, depending on our previous configuration we are going to see a list of all our apps and websites previously created, we click on the Web tab and then select the website we want to configure, once the new drawer is opened, we’ll copy the measurement ID and then go back to our Webforce instance.

Just like we did with the Facebook Pixel we are going to create a new name for our pixel and then select the Google Analytics Universal ID from the list of options, the last step is to paste the measurement id copied from our analytics panel and then click on save.

Save a custom fragment of code

If required we can add custom code to our pages using the Custom option from the list of Tag Types. “With great power comes great responsibility” so we need to make sure the code fragment we are adding to our site must be syntactically correct and we should have idead what it does, having these two points checked we can add whatever javascript or HTML code we need to our pixel.