Facebook Pixel, Twitter Card & Open Graph

Facebook Pixel 

Twitter Card

Open Graph

Facebook Pixel is an analytics tool which measures the effectiveness of your advertising by assisting you in understanding the actions people take on your website.

Shoppers do not see any evidence that Facebook Pixel has been implemented.

For more information on the business reasons for Facebook Pixel, please see the Facebook Business documentation.

Setting Up Your Facebook Business Account for Facebook Pixel 

Administrators may skip this step if you already have a Facebook Pixel data source set up for your Facebook business account.

From the Facebook events manager (facebook.com/events_manager), click the Add New Data Source button.

Choose to create a Pixel and give it a name. After the Pixel is created, it can be accessed from your Data Sources.

Save the Pixel ID, as it will be needed to configure Facebook Pixel for your storefront.

Supported Facebook Pixel Events

Facebook Pixel tracks the actions of your website using specific events that shoppers might take.

Please see this brief description of these events.

Currently, your cart supports the following six events:

• Add to cart*
• Initiate Checkout
• Page View
• Purchase* 
• Search
• View content*

* For these events, additional analytics are available when your product catalog is paired with the Facebook Catalog Manager.

Configurating Facebook Pixel

Three Configuration - Settings must be configured to use Facebook Pixel:

facebook.Pixel.Enabled

When set to true and facebook.Pixel.Id contains a valid ID for your Facebook Business account, Facebook Pixel will be enabled.

facebook.Pixel.Id

A unique identification number which corresponds to the Facebook Pixel generated for your Facebook Business account. This is available from the Data Sources in the Events Manager within Facebook Business Account Management and must be configured alongside facebook.Pixel.Enabled

facebook.Pixel.Entity.AddToCart.XmlPackage

Used only for the Add to cart event, this is a comma-separated list of XML Packages which support adding to cart. By default, the entity.simpleproductlist.xml.config XML Package is included. Any other entity pages which you also wish to report Add to cart events to Facebook Pixel must be configured here. If the XML Package added does not have add-to-cart buttons, this Setting will have no effect for that package.

Twitter Card & Open Graph

These tags are already built into the website. This is used to add "rich text" preview displays in your Twitter, Facebook, Slack, LinkedIn, Google+ and other social apps that utilize Twitter Card tags.

Examples:

Facebook

 Twitter

Slack

How are they used? 

- Open Graph (og:xxx tags) and Twitter Card (twitter:xxx tags) allow for rich previews when pasting URLs from your site into social apps.
- They can be used together to provide full content "cards" of your site pages.
- You can specify a default site image to show when referencing non-product pages (the default image must exist on your site).
- Product images will be used when linking to product pages, if available.

Twitter Card Configuration - Settings

TwitterCard.Enabled Set to ''Yes'' to enable Twitter Card meta tags.
TwitterCard.Tag.Title The Title for the website's Twitter Card meta tags.
TwitterCard.Tag.Description The Description for the website's Twitter Card meta tags.
TwitterCard.Tag.DefaultImageUrl The default Image URL for the website's Twitter Card meta tags (full HTTPS URL).

Open Graph Configuration - Settings

OpenGraph.Enabled Set to ''Yes'' to enable Open Graph meta tags.
OpenGraph.Tag.Title  The Title for the website's Open Graph meta tags.
OpenGraph.Tag.Description  The Description for the website's Open Graph meta tags.
OpenGraph.Tag.DefaultImageUrl  The default Image URL for the website's Open Graph meta tags (full HTTPS URL).
OpenGraph.Tag.Type  The Type for the website's Open Graph meta tags.