initial checkin
This commit is contained in:
Cappy Popp
commit
0e0ffda70b
347
LinkedIn - Demo Form Autofill.html
Normal file
347
LinkedIn - Demo Form Autofill.html
Normal file
@ -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>-->
|
||||
Loading…
Reference in New Issue
Block a user