New to the community? Start here

[Forminator Pro] More data in datalayer

0

I’m a big believer in WPMUDEV in our company, but my colleages often prefer other plug-ins. Sometimes just because they are conservative and other times because the plug-ins they’re using are actually better.

An example:

For advanced tracking and retargetting we need enough data in the datalayer. ‘Ninjaform’s’ datalayer has way more data there… So unfortunately we ended up paying 200€/year just for that plugin while I’m a huge fan of Forminator =(

Just being honest here, because I believe honest feedback is the most valueable.

So my request: Please put more data in the datalayer.

Wed, 10 Jul 2019 18:16:11
More Forminator Pro discussions
Forminator Pro
  • Andy
    • Product Design Lead

    Jeroen Vandessel thanks for your feedback mate, and really happy that you are so passionate about Forminator :grin:

    We would be more than happy to add more available data to submissions – can you give us specifics of what’s missing and we’ll be able to add them in. A bullet-point list would be really helpful :clap:

    Thanks again!

    Andy

  • Jeroen
    • Site Builder, Child of Zeus

    Hello,

    For advanced tracking, it is essential to us to not to only track succesful forms, but to also to be able to segment those succesful forms dynamically – based on the input the user has given.

    Therefore, we would like to be able see to all form fields we’re using in a form back in the dataLayer. This along with its values and so on.

    For instance: I have a dropdown in my form that presents the following options for my client:

    * I am a small business

    * I am a mediuim business

    * I am a large business

    Based on what the visitor has chosen inside this dropdown, I want to be able to pull out the data through Google Tag Manager. For this, the form values must be available inside the dataLayer. Ideally, these would be passed as properties inside an event (this being a succesfully sent form).

    Explanation made simple: the datalayer should contain any form fields used inside a form created by this plugin, as well as its values. These should also be accesible through Google Tag Manager via a dataLayer variable.

    Please do let me know if I can help.

  • Mukul Chawla
    • Product Manager

    Hey Jeroen Vandessel

    After some research on how GTM works with dataLayer, I’ve come with the following solution to pass the form data to the datalayer so the form data is available in GTM. You’d need to add the following piece of code before the </body> tag. I used Branda‘s Tracking Code module to add this script however you can use any other plugin to do this.

    Code:

    <script>
    
jQuery('form#forminator-module-21').on('forminator:form:submit:success', function (e, formData) {
    
let formDataOb = {};
    

    
for (const [key, value]  of formData.entries()) {
    
formDataOb[key] = value;
    
}
    

    
dataLayer.push(
    
{
    
'event': 'formi_donation_form_21_submission',
    
'formData': formDataOb,
    
}
    

    
);
    

    
});
    
</script>

    Note that you need to replace the #forminator-module-21 id with your form id. You can check the form id of your Form by inspecting the HTML code. The above code adds the complete data which is submitted on the successful form submission. You can also rename the event from ‘formi_donation_form_21_submission’ to whatever makes sense in your scenario.

    Attached is the screenshot of printing the dataLayer object n the console after submitting the form to make sure the form data is being pushed to the dataLayer.

    [attachments are only viewable by logged-in members]

    Notice that the form data is being added as an Object to the dataLayer property ‘formData’ which can be renamed to anything. On the GTM, you can create new variables to store the form properties into Data Layer Variables. For examples, if you want to store the email-id in a Data Layer variable, you can use the “.” notation to access that value such as formData.email-1. I used email-1 since that was the key for the email field in my formData dataLayer variable as can be seen in the screenshot of dataLayer object. You can use the same approach to pass any data via the dataLayer to the GTM data layer variables.

    Let me know if you’d need any further info on this.

    Regards,

    Mukul Chawla

  • Mukul Chawla
    • Product Manager

    Jeroen unfortunately, this hasn’t been addressed yet but we have an upcoming Forminator–Beehive(our analytics plugin) integration and I think it would be a good candidate for that since GTM is a part of Beehive. I’m in discussion with the Beehive team for that. For now, you can use the custom code above or I’d encourage you to write an add-on (if you are feeling adventurous) for Forminator using plugin hooks and our dev API.