cpopp/everbridge-gtm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added GA event, switch to JS ISO country lookup

Browse Source
This commit is contained in:
Cappy Popp 2021-01-07 10:32:20 -05:00
parent 155ae8989e
commit 7db04aa163
1 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
LinkedIn - Demo Form Autofill.html
View File

@ -15,16 +15,20 @@
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) {
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');
};
},
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()
});
});
@ -312,23 +323,20 @@
// 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');
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 = {
// tell GA about it, but only if we know they autofilled
if (linkedInAutofillClicked) {
var values = form.getValues(),
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,
values.Country,
values.State,
'{{Page Path}}',
'gclid:' + '{{JS - GA Client ID}}',
].join(' | '),