diff --git a/LinkedIn - Demo Form Autofill.html b/LinkedIn - Demo Form Autofill.html index a36dd61..b584ce8 100644 --- a/LinkedIn - Demo Form Autofill.html +++ b/LinkedIn - Demo Form Autofill.html @@ -15,16 +15,20 @@ newInput.setAttribute('id', tagName + '-flag'); newInput.style.display = 'none'; newInput._value = newInput.value; - Object.defineProperty(newInput, "value", { - get: function() { return this._value; }, - set: function(v) { + Object.defineProperty(newInput, 'value', { + get: function () { + return this._value; + }, + set: function (v) { this._value = v; onChangeHandler(v); - } + }, }); hiddenLinkedInInputs.appendChild(newInput); fillScript.setAttribute('data-field-' + tagName, tagName + '-flag'); - }; + }, + linkedInAutofillClicked = false; + // style the holder div iframeHolderDiv.style.textAlign = 'center'; iframeHolderDiv.style.margin = '10px 0px'; @@ -54,10 +58,15 @@ // requires hiddenInputCreator('email', function (newValue) { // fire the GA event for autofill - console.log("%s value changed to %s", this.ID, newValue); + console.log('%s value changed to %s', this.ID, newValue); + // this sets the flag to ID an autofill event. We are + // gating this on email since it's the only guaranteed + // field that we can't see on screen so can't be set by + // a user directly... + linkedInAutofillClicked = true; }); hiddenInputCreator('country', function (newValue) { - console.log("%s value changed to %s", this.ID, newValue); + console.log('%s value changed to %s', this.ID, newValue); // map to the country we have in our select dropdown var countries = { US: 'United States', @@ -260,15 +269,17 @@ ZM: 'Zambia', ZW: 'Zimbabwe', }; + var newCountry = '{{JS - ISO Country Code to EVBG Country Name}}(newValue)'; // sets the value in the form the user can see if (typeof MktoForms2 !== 'undefined') { mktoForm.setValues({ - 'Country': countries[newValue.toUpperCase()]}); + Country: /*countries[newValue.toUpperCase()]*/ newCountry + }); } }); - hiddenInputCreator('state', function(newValue){ + hiddenInputCreator('state', function (newValue) { mktoForm.setValues({ - 'State': newValue.toUpperCase() + State: newValue.toUpperCase() }); }); @@ -305,34 +316,31 @@ // add the elements to the DOM iframeHolderDiv.appendChild(fillScript); autoFillLocation.prepend(iframeHolderDiv); - firstRow.appendChild(hiddenLinkedInInputs); // fragment vaporizes leaving input elements + firstRow.appendChild(hiddenLinkedInInputs); // fragment vaporizes leaving input elements if (typeof MktoForms2 !== 'undefined') { MktoForms2.whenReady(function (form) { // need the id of the form so we can hook up autofill // doing this way will work on any Marketo form fillScript.setAttribute('data-form', 'mktoForm_' + form.getId()); - mktoForm = form; + mktoForm = form; // so we can use it above form.onSubmit(function (form) { - console.log('onSubmit'); - console.log(form.vals()); - }); - form.onSuccess(function (values, followUpURL) { - console.log('onSuccess LI'); - // tell GA about it, but only if we set the hidden email field since we know LI should have that - if (input.value.length && input.value.indexOf('@') !== -1) { - var eventData = { - category: 'LinkedIn Form AutoFill', - action: 'mktoForm_' + form.getId() + '-', // will automatically set dlv-action which we'll pass to form id to name mapper in event submit in GTM - label: [ - values.Company, - values.Industry, - values.Country, - values.Title, - '{{Page Path}}', - 'gclid:' + '{{JS - GA Client ID}}', - ].join(' | '), - }; + // tell GA about it, but only if we know they autofilled + if (linkedInAutofillClicked) { + var values = form.getValues(), + eventData = { + category: 'LinkedIn Form AutoFill', + action: 'mktoForm_' + form.getId() + '-', // will automatically set dlv-action which we'll pass to form id to name mapper in event submit in GTM + label: [ + values.Company, + values.Industry, + values.Title, + values.Country, + values.State, + '{{Page Path}}', + 'gclid:' + '{{JS - GA Client ID}}', + ].join(' | '), + }; console.log(eventData); // 'eventData' automatically maps to the GTM variables 'dlv - category', 'dlv - action', etc. window.dataLayer.push({ @@ -353,4 +361,4 @@ \ No newline at end of file + data-field-title="Title">-->