2021-01-06 13:02:37 -05:00
|
|
|
<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'),
|
2021-01-06 13:21:19 -05:00
|
|
|
hiddenLinkedInInputs = document.createDocumentFragment(), // since we're creating multiple nodes, just do the add once
|
2021-01-06 13:02:37 -05:00
|
|
|
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');
|
2021-01-06 13:41:08 -05:00
|
|
|
newInput.setAttribute('id', tagName + '-flag');
|
2021-01-06 13:02:37 -05:00
|
|
|
newInput.style.display = 'none';
|
2021-01-06 13:41:08 -05:00
|
|
|
newInput._value = newInput.value;
|
|
|
|
|
Object.defineProperty(newInput, "value", {
|
|
|
|
|
get: function() { return this._value; },
|
|
|
|
|
set: function(v) {
|
|
|
|
|
this._value = v;
|
|
|
|
|
onChangeHandler(v);
|
|
|
|
|
}
|
|
|
|
|
});
|
2021-01-06 13:02:37 -05:00
|
|
|
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
|
2021-01-06 13:41:08 -05:00
|
|
|
hiddenInputCreator('email', function (newValue) {
|
2021-01-06 13:02:37 -05:00
|
|
|
// fire the GA event for autofill
|
2021-01-06 13:42:00 -05:00
|
|
|
console.log("%s value changed to %s", this.ID, newValue);
|
2021-01-06 13:02:37 -05:00
|
|
|
});
|
2021-01-06 13:41:08 -05:00
|
|
|
hiddenInputCreator('country', function (newValue) {
|
|
|
|
|
console.log("%s value changed to %s", this.ID, newValue);
|
2021-01-06 13:02:37 -05:00
|
|
|
// 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
|
2021-01-06 13:41:08 -05:00
|
|
|
country.value = countries[newValue.toLowerCase()];
|
2021-01-06 13:02:37 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/*['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}}',
|
2021-01-06 13:21:19 -05:00
|
|
|
'gclid:' + '{{JS - GA Client ID}}',
|
2021-01-06 13:02:37 -05:00
|
|
|
].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>-->
|
