Installing Facebook Pixel on a website

Marketing research shows that 49% of professionals rank social media as the most effective digital channel. But at the same time, it is considered difficult to implement.

Facebook dominates the world, and in terms of coverage in the CIS it is second only to VK, but the situation is rapidly changing in favor of the former. That's why Facebook ads are very good right now. Every now and then we hear about cases that have raised the ROI / any other KPI of a project hundreds of times, and, of course, we want to feel such an increase ourselves. And when some advertising channels disappear for reasons beyond our control, the task arises to diversify your marketing strategy. The same question is relevant for those who experience stagnation or loss of traffic, decrease in conversion, etc.

Facebook pixel - what is it?

Wherever there is advertising, there is analytics. You need a Facebook Pixel to keep money from going nowhere. This is a small JS tracking code that embeds a 1px image on the site to collect information, work with the audience and improve the effectiveness of advertising campaigns on the corresponding social network. After adding the code, nothing visible on the site will appear, it will send cookies to visitors and track actions, so that they can then be used for retargeting. This method of advertising is now considered one of the cheapest, because aimed at an interested audience. The bottom line is something like this: the entry of a person to the site and his behavior is recorded, then this visitor is shown an advertisement for the site in his Facebook feed. Everything else depends on the settings that will be specified.

What is a pixel for:

Segmentation - creating audiences for your goals.

The pixel collects information about people who visited the pages of the site you need or performed the desired action, who are also Facebook users. An individualized audience is created from them.

Analytics - tracking targeted actions on the site.

The pixel captures conversion events on the site: visits, registration, ordering, etc., brought by advertising. Using this information, you can measure the performance of your ads. It is in the reports.

Optimization - increasing the effectiveness of advertising.

Pixel is assigned to ads for conversion-driven optimization. Facebook can identify people who are more likely to take a targeted action on a site and serve ads to them.

To start enjoying the full benefits of the Facebook Pixel, you need to embed it in your website.

How to install Facebook Pixel on a website

This example is valid for OkayCMS, and can also be compatible with other systems.

1. In your ad account, create a pixel and copy the code, following the recommendations as in the screenshot:

2. Open your website template and paste the code into the header before the closing </head> tag . It should be on every page.

The base code looks like this, and you don't need to change it:

 <! - 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', 'YOUR ID'); // Insert your pixel ID here.
fbq ('track', 'PageView');
</script>
<noscript> <img height = "1" width = "1" style = "display: none"
src = "https://www.facebook.com/tr?id=1266641596747951&ev=PageView&noscript=1"
/> </noscript>
<! - DO NOT MODIFY ->
<! - End Facebook Pixel Code ->

After the main code is installed, data about visitors and page views (PageView) is already collected.

1. Add codes for standard site events that can track a pixel. They are placed on landing pages between script tags in the pixel code:

• View the content of the page (ViewContent);
• Search;
• Adding to cart (AddToCart);
• Adding to the wishlist (AddToWishlist);
• Start checkout (InitiateCheckout);
• Adding payment information (AddPaymentInfo);
• Purchase - here it will be good to set up the parameters value - price and currency - the currency in which it is calculated.
• Lead;
• Completion of registration (Complete Registration).

ViewContent , AddToCart and Purchase (funnel) are required for dynamic remarketing.

There are 3 types of events (regular, advanced and recommended). If there were no instructions from the client, we put the recommended option.

Examples of what the installed code might look like:

 {if $ smarty.get.module == "ProductView" || $ smarty.get.module == "ProductsView" || $ smarty.get.module == "MainView"}
    <script>
        $ (document) .on ('submit', '.fn-variants.okaycms', function (e) {
            e.preventDefault ();
            if ($ (this) .find ('input [name = variant]: checked'). size ()> 0) {
                variant = $ (this) .find ('input [name = variant]: checked'). val ();
            } else if ($ (this) .find ('input [name = variant]'). size ()> 0) {
                variant = $ (this) .find ('input [name = variant]'). val ();
            } else if ($ (this) .find ('select [name = variant]'). size ()> 0) {
                variant = $ (this) .find ('select [name = variant]'). val ();
                price = $ (this) .find ('select [name = variant] option: selected'). data ("price");
            } else if ($ (this) .closest ('. product_inner'). find ('select [name = variant]'). size ()> 0) {
                variant = $ (this) .closest ('. product_inner'). find ('select [name = variant]'). val ();
                price = $ (this) .closest ('. product_inner'). find ('select [name = variant] option: selected'). data ("price");
                / * Qty * /
            }
            fbq ('track', 'AddToCart', {
                content_ids: variant,
                content_type: 'product',
                value: price,
                currency: 'UAH'
            });
        });
 
    </script>
{/ if}
 
{if $ smarty.get.module == "ProductView"}
    <script>
        fbq ('track', 'ViewContent', {
            content_ids: '',
            content_type: 'product',
            value: 
{if $ smarty.get.module == "BlogView" && $ post}
    <script>
        fbq ('track', 'ViewContent', {
            content_ids: '
{if $ smarty.get.module == "CartView"}
    <script>
        fbq ('track', 'InitiateCheckout');
    </script>
{/ if}
{if $ smarty.get.module == 'OrderView'}
    {literal}
        <script>
        fbq ('track', 'Purchase', {
        value: {/ literal}  {foreach $ purchases as $ purchase} '' {if! $ purchase @ last}, {/ if} {/ foreach}] {literal},
        content_type: 'product',
        });
        </script>
 
    {/ literal}
{/ if}

Audiences are configured to use all of the collected information for remarketing. On the appropriate tab → create a new custom audience → select the type "Website traffic" → specify the segment:

• all site visitors;
• users who have visited certain pages;
• only users who visit certain pages;
• users who have not been on the site for a given period;
• custom audience.

And then what the selected item requires is added: URL, time, etc. Exceptions are thrown if necessary.

It will take some time until Facebook starts gathering audiences and gains 20+ people. The data will not appear immediately. This is the norm, but making sure the pixel is active is essential. You can find out that your code works in a special add-on for Chrome .

The result will look something like this:

You now have a Facebook retargeting code. The pixel is loaded quickly, monitors interactions from different devices, has the ability to share with your materials to other resources. A little time to install, and the effect and savings of advertising funds, if set up correctly, will be noticeable.

If you are not at all in the subject, so as not to be left without such a useful tool, contact our specialists for setting.

Order Pixel installation