Example: Fire a Custom Event to Start a Lifecycle Optimizer Flow with Sailthru JS and Google Tag Manager
1. Create the HTMLFor this example we’re just going to use a simple “Complete Purchase” button click to initiate the call. The purchase function automatically reads the value of the sailthru_hid cookie to identify the user. If you’re using Chrome you can install the extension Edit This Cookie to check/edit cookies during testing. Include the following code on your site.
<form> <button type="button" class="btn btn-default ajax" id="sailthru-custom-event">Fire Event</button> </form>
2. Add customEvent Function as a Tag and Set Trigger
- In Google Tag Manager, click New Tag, then change the tag’s name from “Untitled Tag” to “Sailthru – customEvent”.
- Copy the code sample below and paste it into the HTML box.
- Scroll down below the HTML field and click within the Triggering box to add a new trigger, so that Google Tag Manager knows when to fire the tag.
- At the top-right, click to add a new trigger.
- Click the Trigger Configuration box, then select the trigger type All Elements.
- Remember those IDs that you set on the HTML elements? Now’s the time to use the button and its ID to trigger the firing of the tag. We will instruct Google Tag Manager to listen for any click events that happen on a HTML element with an id of sailthru-custom-event (your form button).
- Under This trigger fires on, select Some Clicks.
- Select the options Click ID and contains, and enter the ID sailthru-custom-event in the last field.
- You can optionally give your new trigger a name in the top-left corner.
- Click Save.