Start Here 👋
We recommend using the Cometly Pixel Helper to validate the form capture on your web page. This article serves as an advanced alternative will show you how to use browser inspect to validate that the Cometly base code pixel is working properly for iframes on your web page.
Integrating Cometly Pixel with Iframe Forms
Using iframe forms on your website can be a great way to embed content from another source, including forms from various services. However, when it comes to tracking interactions within these iframes, the Cometly pixel needs to be installed directly within the iframe's code to capture data effectively.
Adding Cometly Pixel to Iframe Forms
Check for Custom Code Options:
Many services that offer iframe forms also provide the ability to add custom code to these forms. You'll want to locate the section where you can insert code within the service you are using.
Placement of the Pixel Code:
If you're given a choice between adding the code to the
<head>or the<body>, opt for the<head>section. This ensures that the pixel is loaded as early as possible.If there's no option for the
<head>or<body>specifically, simply add it to the designated area for the custom code in the iframe.
When Custom Code Isn't an Option:
If the service you're using doesn't allow for adding custom code, you won't be able to automatically capture data from the iframe form. In this case, it's advisable to switch to another form service that does offer the flexibility you need.
Validating Your Iframe Form Tracking
Once you've added the Cometly pixel to your iframe form, you can validate that it's capturing data correctly by following the same steps as you would for a standard form:
Use the browser's inspect tool to open developer tools.
Navigate to the 'Network' tab.
Filter the activity by typing "comet" in the search bar.
Reload the iframe page to see the Cometly pixel load.
Test the form fields by entering test data and observe the events in the Network tab.
You should see the Cometly events corresponding to the form fields, such as first_name_changed, last_name_changed, email_address_changed, and phone_changed. If these appear, you've successfully integrated the pixel with your iframe form.
You can use the video below to learn how to check & ensure that you are seeing the event changes while using Inspect on the page:
By ensuring the Cometly pixel is installed within your iframes, you maintain consistent and accurate tracking of user interactions, no matter where the form originates.