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 () {
-          set: function(v) {
+            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');
+          // 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');
+                category: 'LinkedIn Form AutoFill',
-          // tell GA about it, but only if we set the hidden email field since we know LI should have that
+                action: 'mktoForm_' + form.getId() + '-', // will automatically set dlv-action which we'll pass to form id to name mapper in event submit in GTM
-          if (input.value.length && input.value.indexOf('@') !== -1) {
+                label: [
-            var eventData = {
+                  values.Company,
-              category: 'LinkedIn Form AutoFill',
+                  values.Industry,
-              action: 'mktoForm_' + form.getId() + '-', // will automatically set dlv-action which we'll pass to form id to name mapper in event submit in GTM
+                  values.Title,
-              label: [
+                  values.Country,
-                values.Company,
+                  values.State,
-                values.Industry,
+                  '{{Page Path}}',
-                values.Country,
+                  'gclid:' + '{{JS - GA Client ID}}',
-                values.Title,
+                ].join(' | '),
-                '{{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 @@
 <!-- what LinkedIn recommends which doesn't allow any customization -->
 <!--<script type="IN/Form2" data-form="mktoForm_1248" data-field-firstname="FirstName" 
   data-field-lastname="LastName" data-field-phone="Phone" data-field-company="Company" 
-  data-field-title="Title"></script>-->
+  data-field-title="Title"></script>-->