Below are detailed, step-by-step instructions for implementing a custom event using Source Pixel. By following these steps, you’ll be able to send data attributes—such as email addresses, names, or other form information—back to Source.
1. Initialize Source Pixel
First, confirm that Source Pixel is properly installed on your webpage. To do this, include the following script in your HTML file—typically in the <head> section or right before </body>. This script initializes the Source Pixel environment and triggers a default “pageload” event.
Where to Find Your Script
You can retrieve your unique Source Pixel script in your account’s Settings section. Copy it, then paste it into your site’s code.
2. Trigger a Source Pixel Event on Form Submission
Use JavaScript to listen for the button click on the form’s submit button. When the button is clicked, you’ll capture the values from the form fields and send them to Source Pixel as a custom event.
<script type="text/javascript">
document.getElementById('submitButton').addEventListener('click', function(event) {
event.preventDefault(); // Prevent the form from submitting normally
var email = document.getElementById('clientEmail').value;
var name = document.getElementById('clientName').value;
// Trigger a custom event to Source Pixel, passing along the form data
sourcePixel('event', 'buttonClick', {
email: email,
name: name
});
});
</script>
3. Triggering Custom Events Without an Event Listener
If you’d like to fire a custom event without relying on an event listener—say, at a specific point in your application’s workflow—you can call sourcePixel('event', 'customEvent', {...}) directly. Just pass the data you want to capture:
4. Confirm Your Data
After implementing these steps, check your Source account to ensure that your custom events and the data you’ve passed (such as email and name) are being recorded correctly. This will help you verify that your custom event setup is working as intended.
Summary
Include and initialize the Source Pixel script.
Set up your HTML form with the required data fields.
Use a JavaScript event listener (or a direct sourcePixel call) to trigger custom events and send data.
Verify that your events and attributes are appearing correctly in Source.
By following these instructions, you’ll have a working example of how to implement custom events to track form inputs and other data within Source Pixel.