From 0e0ffda70bf26eb64c61d4a23fe4cbc4bfd4a318 Mon Sep 17 00:00:00 2001
From: Cappy Popp <356651+cappypopp@users.noreply.github.com>
Date: Wed, 6 Jan 2021 13:02:37 -0500
Subject: [PATCH] initial checkin

---
 LinkedIn - Demo Form Autofill.html | 347 +++++++++++++++++++++++++++++
 1 file changed, 347 insertions(+)
 create mode 100644 LinkedIn - Demo Form Autofill.html

diff --git a/LinkedIn - Demo Form Autofill.html b/LinkedIn - Demo Form Autofill.html
new file mode 100644
index 0000000..6be4404
--- /dev/null
+++ b/LinkedIn - Demo Form Autofill.html	
@@ -0,0 +1,347 @@
+<script>
+  (function () {
+    var fillScript = document.createElement('script'), // the LI autofill script (client-side)
+      iframeHolderDiv = document.createElement('div'), // so we can style location of button
+      autoFillLocation = document.querySelector("form[id^='mktoForm_']"), // will only find first Marketo form on a page
+      firstRow = document.querySelector('form .mktoFormRow'),
+      hiddenLinkedInInputs = document.createDocumentFragment(), // since we're creating multiple nodes, just do the add once
+      clientID = (function () {
+        try {
+          var tracker = ga.getAll()[0];
+          return tracker.get('clientId'); // GA/GTM will do this same thing in customTask - see GTM customTask variable
+        } catch (e) {
+          return 'n/a';
+        }
+      })(),
+      hiddenInputCreator = function (tagName, onChangeHandler) {
+        var newInput = document.createElement('input');
+        newInput.style.position = 'absolute';
+        newInput.style.left = '-999em';
+        newInput.setAttribute('name', tagName + '-flag');
+        newInput.setAttribute('type', 'text');
+        newInput.setAttribute('id', tagName + '-flag');
+        newInput.onchange = onChangeHandler;
+        newInput.style.display = 'none';
+        hiddenLinkedInInputs.appendChild(newInput);
+        fillScript.setAttribute('data-field-' + tagName, tagName + '-flag');
+      };
+    // style the holder div
+    iframeHolderDiv.style.textAlign = 'center';
+    iframeHolderDiv.style.margin = '10px 0px';
+
+    // required by LinkedIn
+    fillScript.setAttribute('type', 'IN/Form2');
+
+    // turns out 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...
+    /*fillScript.setAttribute('data-field-firstname', 'FirstName');
+    fillScript.setAttribute('data-field-lastname', 'LastName');
+    fillScript.setAttribute('data-field-phone', 'Phone');
+    fillScript.setAttribute('data-field-company', 'Company');
+    fillScript.setAttribute('data-field-title', 'Title');*/
+
+    // 'Pseudo-hide' input fields to give us a place to store
+    // the email address and country LI provides to us. We do this for 2
+    // reasons:
+    // [1] To 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.
+    // [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 () {
+      // fire the GA event for autofill
+    });
+    hiddenInputCreator('country', function () {
+      console.log(this.id + " changed!");
+      // map to the country we have in our select dropdown
+      var countries = {
+        US: 'United States',
+        GB: 'United Kingdom',
+        AE: 'United Arab Emirates',
+        CA: 'Canada',
+        IN: 'India',
+        AF: 'Afghanistan',
+        AL: 'Albania',
+        DZ: 'Algeria',
+        AD: 'Andorra',
+        AO: 'Angola',
+        AG: 'Antigua and Barbuda',
+        AR: 'Argentina',
+        AM: 'Armenia',
+        AU: 'Australia',
+        AT: 'Austria',
+        AZ: 'Azerbaijan',
+        BH: 'Bahrain',
+        BD: 'Bangladesh',
+        BB: 'Barbados',
+        BY: 'Belarus',
+        BE: 'Belgium',
+        BZ: 'Belize',
+        BJ: 'Benin',
+        BM: 'Bermuda',
+        BT: 'Bhutan',
+        BO: 'Bolivia',
+        BA: 'Bosnia and Herzegovina',
+        BW: 'Botswana',
+        BR: 'Brazil',
+        BN: 'Brunei',
+        BG: 'Bulgaria',
+        BF: 'Burkina Faso',
+        BI: 'Burundi',
+        KH: 'Cambodia',
+        CM: 'Cameroon',
+        CV: 'Cape Verde',
+        CF: 'Central African Republic',
+        TD: 'Chad',
+        CL: 'Chile',
+        CN: 'China',
+        CO: 'Colombia',
+        KM: 'Comoros',
+        CD: 'Congo Democratic Republic of the',
+        CG: 'Congo',
+        CR: 'Costa Rica',
+        HR: 'Croatia',
+        CU: 'Cuba',
+        CY: 'Cyprus',
+        CZ: 'Czech Republic',
+        DK: 'Denmark',
+        DJ: 'Djibouti',
+        DM: 'Dominica',
+        DO: 'Dominican Republic',
+        TL: 'East Timor',
+        EC: 'Ecuador',
+        EG: 'Egypt',
+        SV: 'El Salvador',
+        GQ: 'Equatorial Guinea',
+        ER: 'Eritrea',
+        EE: 'Estonia',
+        ET: 'Ethiopia',
+        FJ: 'Fiji',
+        FI: 'Finland',
+        FR: 'France',
+        GA: 'Gabon',
+        GE: 'Georgia',
+        DE: 'Germany',
+        GH: 'Ghana',
+        GR: 'Greece',
+        GL: 'Greenland',
+        GD: 'Grenada',
+        GT: 'Guatemala',
+        GW: 'Guinea-Bissau',
+        GN: 'Guinea',
+        GY: 'Guyana',
+        HT: 'Haiti',
+        HN: 'Honduras',
+        HU: 'Hungary',
+        IS: 'Iceland',
+        ID: 'Indonesia',
+        IR: 'Iran',
+        IQ: 'Iraq',
+        IE: 'Ireland, Republic of',
+        IL: 'Israel',
+        IT: 'Italy',
+        CI: 'Ivory Coast',
+        JM: 'Jamaica',
+        JP: 'Japan',
+        JO: 'Jordan',
+        KZ: 'Kazakhstan',
+        KE: 'Kenya',
+        KI: 'Kiribati',
+        KV: 'Kosovo',
+        KW: 'Kuwait',
+        KG: 'Kyrgyzstan',
+        LA: 'Laos',
+        LV: 'Latvia',
+        LB: 'Lebanon',
+        LS: 'Lesotho',
+        LR: 'Liberia',
+        LY: 'Libya',
+        LI: 'Liechtenstein',
+        LT: 'Lithuania',
+        LU: 'Luxembourg',
+        MK: 'Macedonia',
+        MG: 'Madagascar',
+        MW: 'Malawi',
+        MY: 'Malaysia',
+        MV: 'Maldives',
+        ML: 'Mali',
+        MT: 'Malta',
+        MH: 'Marshall Islands',
+        MR: 'Mauritania',
+        MU: 'Mauritius',
+        MX: 'Mexico',
+        MD: 'Moldova',
+        MC: 'Monaco',
+        MN: 'Mongolia',
+        ME: 'Montenegro',
+        MA: 'Morocco',
+        MZ: 'Mozambique',
+        MM: 'Myanmar',
+        NA: 'Namibia',
+        NR: 'Nauru',
+        NP: 'Nepal',
+        NL: 'Netherlands',
+        NZ: 'New Zealand',
+        NI: 'Nicaragua',
+        NE: 'Niger',
+        NG: 'Nigeria',
+        KP: 'North Korea',
+        NO: 'Norway',
+        OM: 'Oman',
+        PK: 'Pakistan',
+        PW: 'Palau',
+        PS: 'Palestine',
+        PA: 'Panama',
+        PG: 'Papua New Guinea',
+        PY: 'Paraguay',
+        PE: 'Peru',
+        PH: 'Philippines',
+        PL: 'Poland',
+        PT: 'Portugal',
+        QA: 'Qatar',
+        RO: 'Romania',
+        RU: 'Russia',
+        RW: 'Rwanda',
+        KN: 'Saint Kitts and Nevis',
+        LC: 'Saint Lucia',
+        VC: 'Saint Vincent and the Grenadines',
+        WS: 'Samoa',
+        SM: 'San Marino',
+        ST: 'São Tomé and Príncipe',
+        SA: 'Saudi Arabia',
+        SN: 'Senegal',
+        RS: 'Serbia',
+        SC: 'Seychelles',
+        SL: 'Sierra Leone',
+        SG: 'Singapore',
+        SK: 'Slovakia',
+        SI: 'Slovenia',
+        SB: 'Solomon Islands',
+        SO: 'Somalia',
+        ZA: 'South Africa',
+        KR: 'South Korea',
+        SS: 'South Sudan',
+        ES: 'Spain',
+        LK: 'Sri Lanka',
+        SD: 'Sudan',
+        SR: 'Suriname',
+        SZ: 'Swaziland',
+        SE: 'Sweden',
+        CH: 'Switzerland',
+        SY: 'Syria',
+        TW: 'Taiwan',
+        TJ: 'Tajikistan',
+        TZ: 'Tanzania',
+        TH: 'Thailand',
+        BS: 'The Bahamas',
+        GM: 'The Gambia',
+        TG: 'Togo',
+        TO: 'Tonga',
+        TT: 'Trinidad and Tobago',
+        TN: 'Tunisia',
+        TR: 'Turkey',
+        TM: 'Turkmenistan',
+        TV: 'Tuvalu',
+        UG: 'Uganda',
+        UA: 'Ukraine',
+        UY: 'Uruguay',
+        UZ: 'Uzbekistan',
+        VU: 'Vanuatu',
+        VA: 'Vatican City',
+        VE: 'Venezuela',
+        VN: 'Vietnam',
+        EH: 'Western Sahara',
+        YE: 'Yemen',
+        ZM: 'Zambia',
+        ZW: 'Zimbabwe',
+      },
+      country = document.querySelector("#Country");
+      // sets the value in the form the user can see
+      country.value = countries[this.value.toLowerCase()];
+    });
+
+    /*['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
+    iframeHolderDiv.appendChild(fillScript);
+    autoFillLocation.prepend(iframeHolderDiv);
+    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());
+        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:' + clientID,
+              ].join(' | '),
+            };
+            console.log(eventData);
+            // 'eventData' automatically maps to the GTM variables 'dlv - category', 'dlv - action', etc.
+            window.dataLayer.push({
+              event: 'formLinkedInAutoFill', // MUST FIX WHEN EXPANDING AS EVENT ONLY FIRES ON DEMO PAGE
+              eventData: eventData,
+              eventCallback: function () {
+                // this just prints that we've sent it
+                console.log('event submitted: ' + eventData);
+              },
+            }); // populated on the GTM side
+          }
+          return false;
+        });
+      });
+    }
+  })();
+</script>
+<!-- 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>-->