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:
- Variable. To capture the item that the user have selected. You can skip this part if your event params are static.
- Trigger. Letting Google Tag Manager know where the “add to cart” happen within my website
- 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.
- In the tag edit screen, click “Advanced Settings”
- 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”.
4. Select “Custom Javascript” as your variable type. Make sure you give your variable name an unique name. I named mine “addCartParam”. We will be using this param in our tag later. I’d placed the code snippet I had tested in Chrome’s Console earlier into the Custom Javascript text area. You can copy and customize using the code snippet below.
function main()
{
var product_id = document.getElementsByClassName('remove')[0].dataset.product_id;
return product_id;
}
5. Click “Save” in Google Tag Manager. Congrats, you have just created the variable.
Creating the Trigger #
In Google Tag Manager, a trigger listens to your web page for certain types of events like form submissions, button clicks, or page views. The trigger tells the tag to fire when the specified event is detected. Every tag must have at least one trigger in order to fire.
You have to choose your trigger very deliberately. Trigger misfiring will spam your visitors with incessant messages, and use up your messaging credit quickly.
1. Go to your Google Tag Manager’s dashboard. Click on “Triggers” and then click on “New”
2. In this example, I am using a “Timer” trigger type because I do not want my website visitors to be immediately confronted with a cross-sell coupon, right after they have added an item into their shopping cart. I have set the timer to 7 seconds after the item has been added into the cart. I have also set this trigger to be activated only in the Cart page at peasy.ai/cart, otherwise my website visitors will be receiving the coupon message at every page. Make sure to give your trigger an unique name, I’ve named mine “AddToCartTrigger”.
3. Click “Save” and you’re good to go.
Creating the Tag #
Tags in Google Tag Manager are the means to invoke your Custom Javascript Codes. Everything comes together during the tag creation phase.
1. Go to your Google Tag Manager’s workspace, click on “Tags” and then click “New”.
2. Select “Custom HTML” as your tag type. Insert the Javascript code snippet to invoke Peasy custom event. I have set my event name as “addtocart” and use the variable I’ve created earlier as event params. Event params are JSON object, so you can add more than one value. You can change the event name and params, but reuse the same function call to trigger other events. I have included the code snippet used in this example below.
<script>
window.$peasy.triggerEvent({event_name: "addtocart", event_params: {product_id: "{{addCartParam}}"}});
</script>
How to Setup Automation Action #
1. I have created a very simple chatbot which will send a pants discount if the visitor have a shirt in their shopping basket, and vice versa. Follow the instructions here to create a chatbot in Peasy.
2. Take note of your bot name. We will be using it in the next step.
How to Setup Automation Rule #
Assigning a chatbot #
This rule is suitable if you just want a simple implementation; send any visitors an upsell coupon – right after they have add an item in their shopping basket.
Create a new automation in the admin setting. For more information on automation, refer to the tutorial here.
- Select “Event Created” as event type
- Select “Event Name” as conditions.
- In this example, I want this automation to run whenever the “addtocart” event from “window.$peasy.triggerEvent” is invoked.
- Select “Assign a bot” as your action type.
- Paste the name of the bot we have created earlier.
- Since I want the website visitor to receive the upsell coupon while they are still on the website, I have selected livechat. In some instances, you’ll want to use WhatsApp – such as sending a coupon to get users that have left your website. For more information on which inbox to use for your bot, refer to the chatbot tutorial here.
Creating Complex Event #
- Suppose, I want to run a cart abandonment campaign; where I want to convert visitors who are still deliberating but have yet to make the final purchase decision.
This will require an additional step:
- Setup an automation rule to create complex event
- Then create a chatbot automation rule which respond to that event
1. Similar to earlier, create a new automation rule:
- Select “Event Created” as your event type.
- I have added this condition to restrict recipients who have added to cart at least 3 times within the past 3 days.
- Since they will receive the coupon after the third attempt, I want to prevent sending the same coupon again at their fourth and subsequent add to cart attempt.
- I want also to exclude visitors who have purchased from receiving this coupon
2. Instead of directly triggering the chatbot, I have configured the action to trigger a new event when all of these conditions are fulfilled; the “senddiscount” event.
3. Finally, link everything by creating a new Automation. The new automation will be triggered whenever the “senddiscount” event is created, and will invoke the chatbot to send the upsell discount.
