added GA event, switch to JS ISO country lookup

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", {
+        Object.defineProperty(newInput, 'value', {
-          get: function() { return this._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) {
       mktoForm.setValues({
-        'State': newValue.toUpperCase()
+        State: newValue.toUpperCase()
       });
     });
 
@@ -312,23 +323,20 @@
         // 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');
+          // tell GA about it, but only if we know they autofilled
-          console.log(form.vals());
+          if (linkedInAutofillClicked) {
-        });
+            var values = form.getValues(),
-        form.onSuccess(function (values, followUpURL) {
+              eventData = {
-          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,
+                  values.Country,
+                  values.State,
                   '{{Page Path}}',
                   'gclid:' + '{{JS - GA Client ID}}',
                 ].join(' | '),