Jump to content

New Facebook Pixel - How To?

onpelikan
 Share

Recommended Posts

onpelikan Newbie

onpelikan

Posted
Posted

Hi, Is there some tutorial for installing Facebook Pixel (not old conversion pixel)?

 

Facebook pixel Code is in header section of all pages?

 

Event code is only in relevant page? How to do that?

 

Thank you very much

 

 

 

Here are instructions from Facebook:

Copy the code below and paste it between the <head> and </head> in your website code. You can add standard events from the list below to track specific actions people take on your website.

To confirm installation, please use the Pixel Helper. Learn more in the Help Center.
Facebook Pixel Code
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){..... //there is function here

fbq('init', '...');
fbq('track', "PageView");
</script>

<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=xxxxxxxxx&ev=PageView&noscript=1"
/>
</noscript>
<!-- End Facebook Pixel Code -->
Standard events
Add standard events to your code to track specific types of actions on your website. Copy the code for the type of event you want to measure, and paste it below the pixel code on the relevant page within a <script> tag. Learn more about conversion tracking.

// ViewContent
// Track key page views (ex: product page, landing page or article)
fbq('track', 'ViewContent');


// Search
// Track searches on your website (ex. product searches)
fbq('track', 'Search');


// AddToCart
// Track when items are added to a shopping cart (ex. click/landing page on Add to Cart button)
fbq('track', 'AddToCart');


// AddToWishlist
// Track when items are added to a wishlist (ex. click/landing page on Add to Wishlist button)
fbq('track', 'AddToWishlist');


// InitiateCheckout
// Track when people enter the checkout flow (ex. click/landing page on checkout button)
fbq('track', 'InitiateCheckout');


// AddPaymentInfo
// Track when payment information is added in the checkout flow (ex. click/landing page on billing info)
fbq('track', 'AddPaymentInfo');


// Purchase
// Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});


// Lead
// Track when a user expresses interest in your offering (ex. form submission, sign up for trial, landing on pricing page)
fbq('track', 'Lead');


// CompleteRegistration
// Track when a registration form is completed (ex. complete subscription, sign up for a service)
fbq('track', 'CompleteRegistration');

 

Link to comment
Share on other sites
Bill Dalton Enthusiast

Bill Dalton

Posted
Posted

You can add all of those. The only one that may need to be on a separate page is 

 

// CompleteRegistration
// Track when a registration form is completed (ex. complete subscription, sign up for a service)
fbq('track', 'CompleteRegistration');

 

Depending on what payment options you offer the final payment page may be custom, or it could be that Facebook only wants that call to fire when that page is loaded. For example if you use a Gateway to take Credit cards, and additionally use PayPal, both of these payment processors use a different order confirmation page.  Even if you use a third party one page checkout module you will need to find the final confirmation page it may use.

Link to comment
Share on other sites
onpelikan Newbie

onpelikan

Posted
  • Author
Posted

Thank you very much for your time. I know about different confirmation pages. Can you explain the reason of the events please? I thought that I have to fire event only on page that is relevant to goal, that I want to track.

 

E. g.

 

Search event only on page with search results

Link to comment
Share on other sites
  • 6 months later...
atomointeractive Newbie

atomointeractive

Posted
Posted

The way that i did it is through the Google Tag Manager.
I just put the Google Tag Manager in Header.tpl using the {literal} tags mentioned before.

 

Then in google tag manager I implemented the Facebook tag with the options in: "Tags > Custom HTML Tag",  and activate it in all pages

 

Then I created Tiggers for:

Click on "Add to Cart Button"
"Add to Wishlist Button"

According to these instructions: https://www.youtube.com/watch?annotation_id=annotation_1950112109&feature=iv&src_vid=YUKB-1Ay5lY&v=iaJ9HHvKeL8

 

Then i created new TAGS for each conversion.

For "Add to cart" i used my add to cart Tigger

For "Add to wish list" the same

And for "Initiate checkout" the tigger is the page view: " order?step=1 "

just this way: <script>fbq('track', 'InitiateCheckout');</script>

 

I am still testing the "Make Purchase" tracking in "order-confirmation" page view, as i have to figure out how to enter the value of the pixel track
<script>fbq('track', 'Purchase', {value: '0.00', currency: 'USD'});</script>

I hope this hels, and i hope algo if you can help me with the Value of the purchase.

Link to comment
Share on other sites
  • 4 weeks later...
REGI0 Newbie

REGI0

Posted
Posted (edited)

That would go in your themes header.tpl

Hello 

i just add pixel code to my theme header file but after update my page showing HTTP ERROR 500

 

When I cut off this part:

!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');

page is work again but this is necessary to work pixel. Please help resolve my issue 

Edited by REGI0 (see edit history)
Link to comment
Share on other sites
  • 1 month later...
  • 5 weeks later...
ulriknedergaard Newbie

ulriknedergaard

Posted
Posted

Hi REGI0

 

I came across this post having the same problem as you did. The server returns 500 error and blank page if I have the script in the head-section of my template.

 

Did you solve it, and if so ..... how?

 

I am using the default theme for now.

 

Hello 

i just add pixel code to my theme header file but after update my page showing HTTP ERROR 500

 

When I cut off this part:

!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');

page is work again but this is necessary to work pixel. Please help resolve my issue 

Link to comment
Share on other sites
sfyk Newbie

sfyk

Posted
Posted

Just add the script in {literal} {/literal} brackets and you will get rid of error 500.

 

Have a look here:

 

<!-- Facebook Pixel Code -->
{literal}
<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,
fbq('init', '1234567891234567799');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
/></noscript>
{/literal}
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
Link to comment
Share on other sites
  • 2 months later...
  • 5 months later...
 Share
Go to topic listing
×
×
  • Create New...