Setup Instructions

Sample usage of custom events #

Custom events are perfect to synchronize your customer’s web activities, with your chatbot or sales team engagement.  Below are few examples of how custom events can be employed to your benefit.

Objective Elaboration Suitable for
Prevent customers from leaving without buying from your website
Send visitors a promo coupon when they are about to leave your website
All
Upsell customers when they are shopping at your website
Send a coupon for a product that's compatible to what the customer already have in their shopping basket
E-Commerce
Automatic notification
Send automatic notification during order receipt, processing or shipping
E-Commerce
Reduce sales leakage
Send discount relevant to the customer's shopping basket when customer abandon cart
E-Commerce
Lead Qualification
Trigger chatbot to ask qualification questions after a lead had completed registration
Online to Offline
Trigger follow-up
Send follow-up content relevant to the webpage the prospect was browsing, or trigger your sales team to call the prospect after they had demonstrated purchase intent on your website. Example: WhatsApp an offer to book test drive if a prospect visited the loan calculator page more than 3 times
Online to Offline
Sales Automation
Automatically WhatsApp a quote from your CRM/ERP once it has been generated.
Online to Offline
Knowledge Base
Automatically send support articles relevant to the page/feature the user is stuck at
Customer Support
Onboarding
Automatically trigger chatbot to guide a customer through a feature within your system
Customer Support

How Custom Event Works #

To use custom events in Peasy, you must have at least these 3 components:

  • Javascript codes setup within your website. (Medium to High technical complexity, we advise that you ask your website or analytic programmer to assist you). When a web visitor perform actions that trigger the Javascript code, the code will then invoke Peasy’s Automation engine.
  • Automation Rule. Once the Automation engine is triggered, it will search for all rules that configured to be invoked for that specific event name. You can easily create an automation  rules within Peasy Sales’ admin setting.
  • Automation Action. Each automation rule may have 1 or more corresponding actions. Actions and rules are configured when creating Automation in admin setting. Currently, there are only 2 supported actions for custom event: trigger a chatbot OR create a complex event. 

The instructions in this document are based on using Google Tag Manager along with WooCommerce. But generally, the principles are the same regardless of which method you choose to employ the Javascript code. Google Tag Manager offers the flexibility of optimizing your tags without changing your code base.  

In this example, I will be creating an event and automation that sends a coupon to encourage cross-selling whenever a website visitor add an item to the cart.

How to Setup Javascript Code #

 

Setting up the Javascript code on Google Tag Manager involves 3 components:

  1. Variable. To capture the item that the user have selected. You can skip this part if your event params are static.
  2. Trigger. Letting Google Tag Manager know where the “add to cart” happen within my website
  3. Tag. Invoking the javascript code when the trigger fires.

Pre-requisites #

You must always ensure that the sequence of scripts are invoked in these order.

Before creating the event tags, please ensure that you have loaded both the messenger and user identification script.

You can control tag sequencing in Google Tag Manager’s advance setting.

  1. In the tag edit screen, click “Advanced Settings”
  2. Select Tag Sequencing to control the tag orders

Creating the Variable #

  • You’ll need a bit of Javascript and CSS knowledge to do this. We recommend that you ask your web or analytic programmer to help you.

 

1. Using Chrome’s inspect tool, I’d discovered that WooCommerce stores the product Id in the “remove” link.

2. I’d tested my script to retrieve the product Id on Chrome’s console. If you want to capture:

  • an element value – you can use “document.getElementByClassName” or “document.getElementById”
  • a form field value – you can use “document.querySelectorForAll”

By no means this is an extensive list, we strongly recommend that you ask your web or analytic programmers to setup the javascript codes.

3. Next, create a new variable in your Google Tag Manager’s workspace. Click on “Variables”, followed by “New”.