Form Field Engaged - Githubissues

rossozburnsdi commented 1 year ago

User interacts with any form on the site. Events will apply to all forms

Example Screenshot:

Javascript Code

window.dataLayer = window.dataLayer || [];
dataLayer.push({ event_data: null });  // Clear the previous event_data object.
dataLayer.push({
  "event": "form_field_interaction",
  "detailed_event": "Form Field Engaged",
    "event_data": {
        "field_name": "<field_name>",
        "form_name": "<form_name>",
        "form_type": "<form_type>"
    }
});

milind0299 commented 1 year ago

Hi @rossozburnsdi ,

Moving to SDI Review, please let us know for queries.

Thanks

jerry-bennett commented 1 year ago

Tested on: http://xactlystg.prod.acquia-sites.com/

Use case: Loaded the page with the form and clicked on the first text box.

Status: Working as expected, event does not fire until I click on the form. Works on both the 'contact us' form and 'request a demo' form. @milind0299 I do think there's an issue with the implementation where two events fire for each form. One is null with no information and the other is what is expected. Not super critical but worth looking into.

milind0299 commented 1 year ago

Hi @jerry-bennett ,

the line in bold fires in the code. Sure will look into it and remove the line.

Thanks

milind0299 commented 1 year ago

Hi @jerry-bennett ,

I have removed the line in the code that was causing the null object for all events.

Thanks

rossozburnsdi commented 1 year ago

@milind0299

Tested on: https://xactlystg.prod.acquia-sites.com/company/contact-us

Use case: Loaded the page with the form and clicked on the first text box.

Status: @milind0299 This is working but can we change this. Instead of firing on each click of the form field can you change it be onchange of the field. We are mainly looking to have this only first change of the form field. We are trying to avoided inflating the numbers.

milind0299 commented 1 year ago

Hi @rossozburnsdi ,

As per the new scenario, now the click will be fired only once

Thanks.

milind0299 commented 1 year ago

Hi @rossozburnsdi ,

As per our discussion yesterday. Now when the form field is clicked , form_started event will be triggered once and on filling each and every field form_field_interaction will be triggered. Do let us know for queries.

Thanks

rossozburnsdi commented 1 year ago

@milind0299 This is not what we discussed on the call. We are looking for form_start to fire on the the first click of the form (i.e. the first name field).

Form Field Engaged should only fire when the user types in the form input fields. However, we are looking for this to only push to the data layer only once. i.e. If the user fills out the first name field but spells their name wrong and continues to fill out the form then updates the first name field with the correct name. The data layer event should only fire once.

Below is an example function of what we are looking for. We can discuss on Tuesday's call if this is still unclear.

  var acFields = window.acFields = window.acFields || [];
  var inFieldsArray = 'no';
  for (var i = 0; i < acFields.length; i++) {
    if (acFields[i] == element) {
      inFieldsArray = 'yes';
    }
  }
  if (inFieldsArray == 'no') {
    dataLayer.push({
      'event': 'form_change',
      'field_name': element,
    })
  }
  window.acFields.push(element);
};

//Change listener on first name
jQuery('input[name*="FirstName"]').change(function() {
  var le = 'first name';
  detectChange(le);
});

//Change listener on last name
jQuery('input[name*="LastName"]').change(function() {
  var le = 'last name';
  detectChange(le);
});