You will need to have the "base code" from each platform you want to track event(s) in added to the page for this to work. Use our available <Scripts> section to add additional script/pixel code to your ZP pages. 

Note: If you're using either the native Shopify Facebook Pixel integration and/or native Shopify Google Analytics integrations (Online Store > Preferences of Shopify admin), then the "base code" for those platforms will already be included in your ZP pages.

Buttons (non-Buy Boxes):

Single button

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

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 a common script to fire a Facebook "Custom event" when a button is clicked:

<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>

Multiple buttons

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() {});});

Example script using the arrayID variable to fire a Facebook 'Custom event' when a button is clicked:

<script>
var arrayId = ['10921', '10744', '10747'];
arrayId.forEach(id => {    
document.querySelector('[data-id="' + id +'"]').addEventListener('click', function() {
fbq('track', 'Custom event', {   // Enter your event title
content_ids: ['1234'],         // Enter you custom parameters
content_type: 'product',
value: 2.99,
currency: 'USD'
});
});
});
</script>

Buttons (Buy Boxes):

Here is an example of a script which will fire the Pinterest "addtocart" event when a Buy Box button is clicked on your ZP page:

<script>
var arrayId = ['button[data-zp-link-type="cart"]', 'button[data-zp-link-type="cart_current_page"]'];
arrayId.forEach(function(id) {    
var btn = document.querySelector(id);
if(btn)  {
btn.addEventListener('click', function() {
pintrk('track', 'addtocart');
});
}
});
</script>

The script should be added to the Scripts > Footer section of the page. Alternatively, you can add the script as a Global script through Settings > Page Scripts if you need the script included on all or a majority of your ZP pages:

Images:

For images you should use the selector div[data-id="1041356"], you can get the specific data-id for the image on your page as shown here:

Example of a common script to fire a Facebook "Custom event" when an image is clicked:

<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?