Jump to content

Integrating Meta Pixel to button clicks (addtocart function)

Recommended Posts

Trying to get Facebook to track page view + addtocart function when buttons are clicked on pages so that I can track that as consideration.

 

I have added the base meta pixel code to the website tools - code injection. (replaced my actual pixel ID with "mypixelid")

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

 

Then added the following code under advanced > inject custom CSS to pages where I want button clicks to be tracked as "addtocart" so I can retarget etc.

<script>
function fpTrackingClicks() {
    // Add to Cart
    var btns = document.querySelectorAll('.sqs-block-button-element');
    if (btns) {
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function() {
                fbq('track', 'AddToCart');
            }, false);
        }
    }
}
</script>

 

 

For some reason, the code isn't working properly/ it's not registering through Facebook. Any idea to what the issue is?

 

Thank you in advance!

Link to comment
  • Replies 1
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.