Implementing pixels via JavaScript in your experiences provides a flexible way to send tracking information to various platforms. While there are many different types of pixels, the general implementation process in Experiences by Jebbit is very similar across the board. You typically need a container script in the global JavaScript and individual events placed on each screen or where desired.
Before you begin
Have a clear understanding of when the pixel should fire (e.g., on page load, when an answer is selected, or upon completion).
Collaborated with stakeholders to validate the purpose and expected behavior of the pixel.
Add container scripts
The first step with almost every type of pixel is adding container scripts.
Navigate to the global JavaScript area.
Select On Show.
Add your container code in this window.
Note: If your container code includes <script> tags, these are not needed here since you are working directly with JavaScript. If you need to add any <noscript> tags into the body, you can do so using JS.
Implement event scripts
Each screen within Experiences by Jebbit contains the option for on show and on respond JavaScript.
Select the screen where you want to implement an event.
Place your event code in the on show area if you want the event to fire when the screen loads.
Place your event code in the on respond area if the JS should fire upon user response.
Event timing
In Experiences by Jebbit, a "response" is evaluated as when a user moves onto the next screen. While you might think of any page interaction as a "response," Experiences by Jebbit only considers user progression as a response for the purpose of firing on respond scripts. If you need to track other page interactions as responses, you can accomplish this using "on show" JS.
Conditional logic for dynamic tagging
There are many types of screens you might use in an Experience. Writing logic for dynamic tagging can differ depending on the screen type. You can use conditional logic to handle responses from specific screen types.
Here are sample code templates for common screen types:
SINGLE RESPONSE:
var response = options.contentPiece.get('value').replace(/(<([^>]+)>)/ig, '');
if (response.match(/button a/i)){} else {}SATA (Select All That Apply):
var trueItems = $('.screen-' + options.contentCollection.id + ' .form-field-wrapper input[type="checkbox"]:checked');
for (let i = 0; i < trueItems.length; i++) {
var formValue = $(trueItems[i]).siblings().text().trim();
if (formValue.match(/checkbox 1/i)) { }
if (formValue.match(/checkbox 2/i)) { }
}(Note: This code sample uses jQuery, a common JavaScript library).
SLIDER:
var sliderValue = $('.screen-' + options.contentCollection.id + ' .form-field-wrapper-0 input').val();
if(sliderValue > 2){} else {}FORM SUBMISSION:
var response = options.contentPiece.get('value').replace('<p>', '').replace('</p>', '').toLowerCase();
if (response === "form"){} else {}
Next steps
Test the Experience in preview mode and inspect the browser console or use tag debugging tools to verify that the pixel fires as expected.
FAQ
What if I want more customization with pixel tracking?
For a more customized setup, refer to the Google Tag Manager integration. This allows for more complex logic and triggers than direct JavaScript pixel implementation.
How can I test if my pixels are firing correctly?
You can test simple event implementation and testing by previewing your experience and using browser developer tools or specific tag-debugging extensions to see if the expected pixel calls are made when screens load ("on show") or users progress ("on respond").