<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
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.style.display = 'none';
newInput._value = newInput.value;
Object.defineProperty(newInput, "value", {
get: function() { return this._value; },
set: function(v) {
this._value = v;
onChangeHandler(v);
}
});
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 (newValue) {
// fire the GA event for autofill
console.log("%s value changed to %s", this.ID, newValue);
});
hiddenInputCreator('country', function (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',
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[newValue.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:' + '{{JS - GA Client ID}}',
].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>-->