Events

this documentation provides an overview of the events listener strategy and the different events you can listen to on the hyperzod ordering website list of events below is the list of events available for listening event description add to cart triggered when a product is added to the cart the event contains the product details view merchant triggered when a merchant is viewed the event contains the merchant details view product triggered when a product is viewed the event contains the product details search results triggered when a search is performed the event contains the search query, search results for merchants, and products place order triggered when an order is placed the event contains the order details checkout initiated triggered when checkout is initiated the event contains the cart details sample code to fire a gtm (google tag manager) custom event from javascript on place order event push an event object to the data layer with the event property set to the name of the custom event like neworder window\ addeventlistener('place order', function (event) { var datalayer = window\ datalayer || \[]; datalayer push({ event 'neworder' }); }); usage to set up more event listeners, you can use the following syntax window\ addeventlistener('\<event name>', function (event) { // custom logic or handler function }); replace \<event name> with the name of the event you want to listen to (e g , view merchant , view product , etc ) you can add your custom logic or a handler function inside the listener as required steps to add listener on your ordering website and app 1\ navigate to your admin panel 2\ to the left, click on "settings" 3\ then click "theme settings" 4\ inside you’ll find three sections theme general, custom code, header and footer click on "custom code i nside theme setting click on setting icon > click on cutstom code 5\ inside the custom code section, choose “custom html head” and paste the “event listener code” inside 6\ now if you want to add pixel code for tracking generate your facebook pixel code, the pixel code will look like this \<! 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', '11111111111111'); fbq('track', 'pageview'); \</script> \<noscript>\<img height="1" width="1" style="display\ none" src="https //www facebook com/tr?id=111111111111\&ev=pageview\&noscript=1" />\</noscript> \<! end meta pixel code > case 1 if you want to track only webs spefic events case 2 if you want to track only app specific events generate one more pixel code for apps we are making it so that we can get one more pixel code for apps case 3 if you want to track both app and web specific events 7 you can also create facebook custom events by using hyperzod custom events let's take a look if you want to create a custom facebook event for add to cart, add the code below the pixel code \</script> window\ addeventlistener('add to cart', function (event) { fbq('trackcustom', 'add to cart', {adddeatils "add your custom details"}); }); \<script> 8\ lastly, click “save”