What are Custom Events and how to use them in InSend?
In InSend you can create your own events (access to a specific page, click on a button, registration, subscription to a newsletter, etc.) and use them on an equal footing with the system events, for example, to send mailings through them.
How to create a new event
Manage events in InSend in the “Settings” > “Custom events” section. When you go there for the first time, you will see instructions on how to create a new event:
To create an event, click the blue button in the upper right corner. This will open the following window:
Fill in these fields:
- Name - any name. This will be used when displaying the event in the visitor timeline and in the filters and segments forms.
- Key - unique identifier of the event (Latin letters, numbers and underscores only). It should be passed by your website as an event parameter.
- CSS selector - an optional field selector of the element you need in your website's HTML markup and click on when the event should be fired (more on this below).
- Description - a clear description of the event. It will be displayed in the event list to make your work easier.
Click the "Create" button. After half the time has passed, the event will appear in Convead. The created events fall into the "General" list.
How to trigger an event on your website
You can use custom events in InSend at eye level with the system - to send mailings, segment visitors, etc. To do this, you need to transfer them from your website to InSend at the right time. There are two ways to do this:
1. Register the event code on your website
For example, if you want to receive events when a visitor clicks the Subscribe button, you need to add the following line to the button handler code:
insend('event', 'custom', {key: 'event_key'});
Where event_key is the key of your event.
2. Use the CSS selector (see above on the event creation form)
Most HTML code elements on your site are marked with one or more CSS selectors to apply the desired style from the CSS file to the desired element. For example, all the "Subscribe to Blog" buttons on your site have the same look and are described by the same class in the CSS file. This means that they have the same selector (or even more than one). You can tell Convead to fire your custom event when you click elements with a particular selector.
In 99% of cases, you can use the attribute values of the class or the ID of the button or link you want to associate with the event. Open your website's code, locate the button or link, and check that it has the specified attributes:
The underlined values are the attributes we need. You can put one of them in the "CSS selector" field of the custom event creation form.
Notice that the value is preceded by the # symbol. This is due to the CSS syntax rules:
- The # defines an id attribute
- Dot . - a symbol for the class attribute
So when you use the value of the id attribute, you prefix it with a #, and when you use the class attribute, you prefix it with a dot.
Before you bind an attribute value to an event, you should verify with your webmaster that the attribute you choose is not used by other elements that you do not need. Otherwise, your event will fire when you click on all those elements. And that is not what you need.
How to use events
To test and make sure that the events arrive correctly in InSend, find yourself in the contacts (the easiest way is to go to the "Contacts" - "Online" page), perform the desired action on the website and make sure that it appears in the timeline with the desired name. Here we can see that the visitor has accepted marketing emails.
After that, you can create a mailing and, in the “Recepients”, specify that the mailing should be sent by this event:
