For example, let's say your website contains an enquiry form that does not send visitors to a unique confirmation page upon successful submission of the form. In this case, you can implement a custom event in PageSense to track successful submissions of this form rather than just clicks on the button.  Or, let's say you have attached a multi-step sign up form on your site where the user moves through various steps to complete the signup process but unfortunately the URL of the page does not change. In this case, you can implement a custom event to track if your form was successfully submitted or not. 

If you're using GTM to integrate with Zoho PageSense, you can easily add and track a number of different PageSense custom events or user interactions on your website by configuring individual tags and trigger conditions in GTM. Whenever a particular custom event tag is triggered in GTM, it executes the respective PageSense custom event and records a successful conversion into your experiment report.

Make sure that you add the PageSense tracking snippet on all the web pages where the custom event is triggered.

To add the PageSense custom event code in GTM:

2. In the Untitled Variable field, enter your tag name that is relevant to the custom event you want to track.

For example, let's say you want to track the clicks on the "Add to Cart" button of your shopping site that does not lead to a unique confirmation page URL or the checkout page when visitors add an item to their cart. So, we'll call it: "Add to cart - PageSense custom event"

</script>
 

</script>


5. Click the trigger icon and choose an appropriate trigger type that is suitable for your use case. There are 14 default triggers that can be used to trigger tags. Furthermore, GTM allows you to combine these triggers for robust control and detailed firing.



Let's now look at two different examples to understand how to choose a trigger type.

Example 01: Tracking button clicks on a single page application

Let us reconsider the example quoted above. Say, you have an "Add to Cart" button on your shopping site and this CTA simply launches an overlay popup or shows an on-screen message once the product has been added to the cart. Now, you want to know successful clicks on this button as they don't redirect to the checkout or any confirmation page URL.

In this case, you can select the All Elements as the trigger type to track the number of conversions obtained on the "Add to Cart" button of your shopping website as explained below:

1. Click the plus icon (+) at the top right corner, enter a name for your trigger and choose the trigger type as All Elements. 
   
   
   
2. Select Some Clicks (since we already set our mission to track that specific click) and specify the conditions and definitions as follows: Click Element---> matches CSS selector -> Copy-paste the element's selector.
   
   
   
   To copy the element selector from your web page: right-click on the CTA element you want to track and select Inspect. Again, right click on the highlighted code, select Copy Selector and paste the same in the value box as shown in the figure.
   
   
   Now, the custom event tag configured through GTM will trigger the click event goal in PageSense as soon as a visitor clicks the "Add to Cart" button on your website. This records the total number of visitors coming  to your site along with the percentage of visitors who successfully clicked this CTA into your PageSenses' experiment report.
   
   Furthermore, the report lets you filter and segment your data based on different audience criteria and the type of items in the cart like the size, color, product model and much more. Using the Click Element trigger type in GTM, you can also track many other important user actions on your ecommerce store like removing items from a cart, adding items to a wishlist, and returning or exchanging items to store.

Similarly, you can implement custom funnel events in GTM using the Click - All Element trigger type to track the number of visitors who complete each stage of your conversion process.

For example, let's say you have a buyer's journey funnel on your shopping website where your potential customers have to go through four stages: homepage--->product page--->cart page--->checkout page to complete a purchase. Now, you want to track clicks on the checkout button that does not redirect to a "thank you" page or confirmation page URL upon successful purchase of a product but instead shows a thank you popup message in the same URL.

In this case, you can configure the custom click event trigger on the 'Checkout' button of your shopping site to track the funnel completion as shown in the figure below. You can also create different triggers for each step of the funnel that is activated by clicking on the respective buttons.

Example 02: Tracking form submissions (using DataLayer Events) with no unique confirmation page or 'thank you' page URL.

Let's say you have a 'Contact Us' form on your website that does not lead to a unique confirmation page or "thank you" message page upon successful submission of the form by visitors. Now, you want to track the actual submissions and abandonment rate by visitors who're filling out the form.

In this case, you can select Custom Event as the trigger type to track the successful Contact form submissions as explained below:

1. Click the plus icon (+) at the top right corner and choose the trigger type as Custom Event.
   
   
   
2. Under the Event name field provide a name for your form event, for example - "contactFormSubmission" for the contact form and select All Custom Events.
   
   
   

In addition to this, you also need to add the below highlighted code in the POST success function of the 'Submit' button in your Contact Us Form available on your website.

Here is an example of code displayed for the success function of the 'Submit' button on the Contact Us page of the website. While you add this code to your site, make sure you provide the event name as already mentioned under the 'Trigger Configuration in GTM' (for example: 'Event': 'contactFormSubmission')

<script>

      function submitForm() {

      var xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function() {

     window.dataLayer.push
({

     'event':''contactFormSubmission''

 });

 }

 };

  xhttp.open("GET", "/", true);

  xhttp.send();

}

</script>

6. Once done configuring the tag and trigger condition, click Save in the top right corner.

7. Now, click the Submit button on the top-right corner then enter the version name and description for the changes made.

You can also click on the Preview button to check your tags for basic errors and to verify that your tag launches on that specific click before actually publishing it.
8. Finally, click Publish to publish the tag and trigger your custom event code on your experiment pages.