I am using Customer.io to identify user information when they submit a form and to track their behavior.
For the newsletter form, everything works fine; I use Customer.io’s “connect custom form” feature, and it successfully scans and recognizes the data.
However, I am unable to track submissions from Shopify forms.
I want to configure it so that when a user submits a Shopify form, Customer.io scans all the form fields and maps them to the data attributes I have defined in Customer.io.
Shopify Forms App uses Shadow DOM to isolate their forms from the rest of the page. This is why Customer.io JS code can’t see them. This is not changeable.
You can reach out to Customer.io and ask if they are able to get into Shadow DOM – maybe that they have a checkbox to enable this.
Alternatively, when Shopify Forms form is submitted, system creates a Metaobject in your store with related data. There is a trigger in Flow for this event and it’s possible to perform some tasks on this data and potentially submit necessary information to Customer.io, say via webhook – another option to discuss with Customer.io support.
To track Shopify form submissions in Customer.io, you’ll need to use a custom JavaScript snippet to intercept the form data and send it manually via Customer.io’s JavaScript SDK or Track API. Shopify forms don’t natively integrate with Customer.io, so you’ll attach an event listener to the form’s submit event, extract the input values, and pass them to Customer.io as custom attributes. Be sure to map each field correctly to your Customer.io data model and include a unique user identifier (like email) for proper tracking.