Here is a Video tutorial showing the entire process
I will walk you through the various steps done in the video.
Step 1: Go to the data sources of the Meta Events Manager dashboard and copy the Meta Base code. The code will look something like this. At the page level, paste this code in Settings---->Tracking code----->Head
<!-- 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', 'pixel ID');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=Pixel ID1&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
Step 2: Copy the snippet below and paste it, at the page level, in Settings---->tracking code------>Body end
<script>$(".track1").on("click", function(){
fbq("track", "AddToCart");
})</script>
Step 3: Now, open the builder, and click the button you want to track. Navigate to the Advanced tab of the Button settings. Under the advanced tab, you will find the "Identifiers".
Paste the CSS class in the script onto the CSS Class field.
This step links the button to the script.
Step 4: save the changes and "publish" the page.
Note: You can download Meta pixel helper Chrome extension to test the events or you can test the events in the Meta events Manager dashboard. I have tested the events through the chrome extension in the above video.
Here is the article that provides Code snippets for various Meta Standard events:
https://business.facebook.com/business/help/402791146561655?id=1205376682832142