diff --git a/LinkedIn - Demo Form Autofill.html b/LinkedIn - Demo Form Autofill.html index 375cbfd..6ba42e4 100644 --- a/LinkedIn - Demo Form Autofill.html +++ b/LinkedIn - Demo Form Autofill.html @@ -38,9 +38,12 @@ // required by LinkedIn fillScript.setAttribute('type', 'IN/Form2'); - // turns out you don't need any of these fields if they're + // You don't need any of these fields if they're // named the same thing as the ones returned from LinkedIn. // Unfortunately means you can't disable them, either... + // LinkedIn will set them automatically if it finds them + // in your form so you need to map them to 'pseudo-hidden' + // fields (like way offscreen). HIDDEN FIELDS WON'T WORK. /*fillScript.setAttribute('data-field-firstname', 'FirstName'); fillScript.setAttribute('data-field-lastname', 'LastName'); fillScript.setAttribute('data-field-phone', 'Phone'); @@ -58,6 +61,7 @@ // [2] To allow us to map the ISO country code LinkedIn provides us // to the [sigh] full-text version of the country our select element // requires + hiddenInputCreator('email', function (newValue) { // fire the GA event for autofill console.log('%s value changed to %s', this.ID, newValue); @@ -67,6 +71,7 @@ // a user directly... linkedInAutofillClicked = true; }); + hiddenInputCreator('country', function (newValue) { // console.log('%s value changed to %s', this.ID, newValue); // map to the country we have in our select dropdown @@ -78,6 +83,7 @@ }); } }); + hiddenInputCreator('state', function (newValue) { // only set state if we're in the US if(mktoForm.getValues()['Country'] === "United States"){ @@ -87,37 +93,7 @@ } }); - /*['email', 'country'].forEach(function(inputField){ - var newInput = document.createElement("input"); - newInput.style.position = "absolute"; - newInput.style.left = "-999em"; - newInput.setAttribute("name", inputField + "-flag"); - newInput.setAttribute("type", "text"); - newInput.setAttribute("id", inputField + "-flag"); - newInput.style.display = "none"; - hiddenLinkedInInputs.appendChild(newInput); - fillScript.setAttribute('data-field-' + inputField, inputField + '-flag'); - });*/ - - // going to pseudo-hide an input field to give us a place to store - // the email address and have it keep the main email field from being - // filled. We *could* autofill email, but if they don't use a business - // address (few do) then submit will reject it. Better to make them - // just fill it to start with. We will also use this to trigger the GA - // autofill event. - // var input = document.createElement("input"); - //input.setAttribute("type", "hidden"); // << nope - /*input.style.position = "absolute"; - input.style.left = "-999em"; - input.setAttribute("name", "email-flag"); - input.setAttribute("type", "text"); - input.setAttribute("id", "email-flag"); - input.style.display = "none"; - - // hook up that ^^^ input field to LinkedIn autofill - fillScript.setAttribute('data-field-email', 'email-flag');*/ - - // add the elements to the DOM + // add the iframe to the holder div iframeHolderDiv.appendChild(fillScript); autoFillLocation.prepend(iframeHolderDiv); @@ -153,7 +129,7 @@ eventData: eventData, eventCallback: function () { // this just prints that we've sent it - console.log('event submitted: ' + eventData); + console.log('event submitted: %O', eventData); }, }); // populated on the GTM side }