Last active
August 1, 2018 18:52
-
-
Save sperand-io/f90f990eeebe11ccbbff to your computer and use it in GitHub Desktop.
Squarespace Form Submission -> Segment "Identify"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* helper function to take the form and | |
* get back a js object with field/value mappings | |
* ignoring submit fields and fields whose name we can't ascertain | |
*/ | |
function serialize(form){ | |
return Array.prototype.slice.call(form.elements) | |
.filter(isInputElement) | |
.filter(isNotSubmit) | |
.filter(hasFieldName) | |
.reduce(function(data, node, index) { | |
data[getFieldName(node)] = node.value | |
return data; | |
}, {}); | |
} | |
/** | |
* Check if this form element is of type input | |
*/ | |
function isInputElement(node) { | |
return node.tagName.toLowerCase() === 'input'; | |
} | |
/** | |
* Check if this is a 'submit' input element | |
*/ | |
function isNotSubmit(node) { | |
return node.type !== 'submit'; | |
} | |
/** | |
* Ensure field has a derived name | |
*/ | |
function hasFieldName(node) { | |
return getFieldName(node) !== 'unknown'; | |
} | |
/** | |
* Attempt to ascertain "name" of field. | |
* | |
* they don't give inputs real `name` attributes, so | |
* best guess is to hack around the element's label text, | |
* falling back to the placeholder text. (their html is | |
* not semantic and often labels erroneously reference | |
* parent divs instead of sibling input elements) | |
* | |
* strip out the stars they show when validation fails | |
* | |
* if label is misplaced _and_ there's no placeholder, | |
* this function is insufficient | |
*/ | |
function getFieldName(input) { | |
if (!input.labels.length) return input.placeholder || 'unknown'; | |
var labelText = input.labels[0].textContent.trim(); | |
return ~labelText.indexOf(' *') | |
? labelText.slice(0, labelText.indexOf(' *')) | |
: labelText; | |
} | |
/** | |
* Listen for form submissions and send identify | |
* if you'd like an event too, just delete the '//' in the track line | |
*/ | |
document.forms[0].addEventListener('submit', function(e) { | |
analytics.identify(serialize(e.target)); | |
// analytics.track('Submitted Form'); | |
}); |
Hi @sperand-io! Thanks for building this. I can't seem to get it to work on Squarespace, though. Can you advise where this code should be injected?
Thx!
Seth
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How can I implement this? Add it to advanced -> code injection?