---
title: Events
slug: events
description: Learn about the events listener strategy for the Hyperzod Ordering Website, including available events like adding to cart, viewing merchants/products, performing searches, and placing orders. Discover sample code for firing custom events with Google Tag 
docTags: 
createdAt: 2023-05-03T14:01:35.000Z
---

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`

```javascript
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:

```javascript
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"

::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Ti0-79NW8lZ46tZG09Z12_1.png" size="82" width="811" height="345" position="flex-start" showCaption="false"}



3\. Then click "Theme settings"&#x20;

::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Rb-JHIYtrFfslpOAazAvG_2.png" size="82" width="654" height="287" position="flex-start" showCaption="false"}



4\. Inside you’ll find three sections Theme General, Custom Code, Header and Footer.&#x20;
Click on "Custom Code

Inside Theme Setting click o&#x6E;**&#x20;setting icon -> click on cutstom code**



::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/nWofDsI87MGcq5xw_hs6M_image.png" size="58" width="381" height="315" position="center" showCaption="false"}



5\. Inside the Custom Code section, choose “Custom HTML Head” and paste the “Event Listener Code” inside.



![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/NzTr9m2V3zGBBLUg4ekBJ_image.png)



6\. Now if you want to add **pixel code for tracking**.

Generate your facebook pixel code, The **pixel code** will look like this.

```javascript
<!-- 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**.

![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/MJSW_s5RCL6EUW9r2dkq1_image.png)

**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.&#x20;

![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/iy1oTPwugxjP2QHvWFhAU_image.png)

**case-3 :** If you want to track **both app and web specific events**.



![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/tsI600DpYfJ0kR-xrxCAo_image.png)

&#x37;**.&#x20;**&#x59;ou 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.

```javascript
</script>
  window.addEventListener('add_to_cart', function (event) {
   fbq('trackCustom', 'add_to_cart', {addDeatils:"add your custom details"});
   });
<script>
```

8\. Lastly, click “Save”



![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/4vQSf6dr9mt31RYC2Ip9K_image.png)