Note: You need to either be using the native Shopify Facebook pixel integration and/or native Shopify Google Analytics integrations (Online Store > Preferences of Shopify admin) for this to work. 

If you're not using those native integrations for Shopify, then you will also need to add the "base code" from each platform to the page as well as the event codes for this to work. Use our available <Scripts> section to add additional script/pixel code to your ZP pages. 

Buttons (non-Buy Boxes):

You can add custom events for each button element on the page.
You need to find the CSS selector for your button element.

Add your own CSS selector, specify the event title and parameters for your event.

Video: https://www.screencast.com/t/JQNwOi0avlCF

Note: This script will work only for one selected button element, i.e. for the button shown in the video, not for all buttons on the page.

This is the common script:

<script type="text/javascript"> 
document.querySelector( 'a[role="button"][data-id="1035116"]' ).addEventListener("click",function() {  // Add your selector instead of a[role="button"][data-id="1035116"]
fbq('track', 'Custom event', {   // Enter your event title
content_ids: ['1234'],              // Enter you custom parameters
content_type: 'product',
value: 2.99,
currency: 'USD'
});
});
</script>

Follow the information below to fire the same event for multiple/all of the buttons on the page using one script:

1. The arrayId variable contains an array with button IDs (it's just an example which illustrates the principle, so you'll need to replace the example IDs with real ones):

2. Here you can add an event the buttons need to react on (example contains "click" event): 

The resulting example script looks like this:

var arrayId = ['10921', '10744', '10747'];arrayId.forEach(id => {    document.querySelector('[data-id="' + id +'"]').addEventListener('click', function() {});});


Images:

For images you should use the selector - div[data-id="1041356"] (div instead of a), you You can get the data-id for the image as shown here:

This is the common script:

<script type="text/javascript"> 
document.querySelector( 'div[data-id="1041356"]' ).addEventListener("click",function() {  // Add your selector instead of div[data-id="1041356"]
fbq('track', 'Custom event', {   // Enter your event title
content_ids: ['1234'],              // Enter you custom parameters
content_type: 'product',
value: 2.99,
currency: 'USD'
});
});
</script>

CRM lightbox optin "submit" button click:

Add a script to fire an event once the submit button is clicked for the CRM lightbox optin form. Just add a script like this into the page's Scripts > Footer section:

<script>
window.ZipifyPages.on('crmsignupsuccess', function(sendParams) {
[desired action] (ex: tracking action initiation)
})
</script>

Example of standard Facebook Lead event:

<script>
window.ZipifyPages.on('crmsignupsuccess', function(params){
fbq('track', 'Lead');
})
</script>

To check it go to your browser's DevTools (Inspect) > Network > activate Preserve Log.
After that you need to open the page, interact with it (optin via the lightbox popup form) and in the Network tab, filter by a word 'Lead' or an event that is written there:

Did this answer your question?