Created
May 23, 2018 20:18
-
-
Save nathanbrauer/3471960175cb5da97670fe51375b6966 to your computer and use it in GitHub Desktop.
For addition to Google Tag Manager; expected trigger: All Pages.
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
<script type="text/plain" id="gdpr-acknowledgement"> | |
<div class="mktoFormRow gdpr-acknowledgement-row" style="margin-bottom:1em;"> | |
<div class="mktoFormCol" style="margin-bottom: 10px;"> | |
<div class="mktoFieldWrap mktoRequiredField" style="display: flex !important;"> | |
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth mktoRequired mktoInvalid" | |
style="position: relative;"> | |
<div class="mktoAsterix" style="position: absolute; right: 0;">*</div> | |
<input name="PSEUDO_GDPR_Opt_In__c" id="PSEUDO_GDPR_Opt_In__c" type="checkbox" value="yes" class="mktoField"> | |
<label for="PSEUDO_GDPR_Opt_In__c"></label> | |
</div> | |
<div class="mktoGutter mktoHasWidth" style="width: 10px;"></div> | |
<label for="PSEUDO_GDPR_Opt_In__c" class="mktoLabel mktoHtmlText mktoHasWidth" style="display:block;font-weight:400;margin-left:10px !important;margin-top: 0 !important;"> | |
By checking this box, I acknowledge that I have | |
read, understand, and agree to the SignalFx | |
<a href="https://signalfx.com/privacy-policy" target="_blank">Privacy Policy</a> and | |
<a href="https://signalfx.com/terms-and-conditions/" target="_blank">Terms of Service</a>. | |
</label> | |
</div> | |
</div> | |
<div class="mktoClear"></div> | |
</div> | |
</script> | |
<script> | |
(function () { | |
// Constants | |
var MKTO_TRUE = 'yes'; //constants not compatible with GTM :( | |
var MKTO_FALSE = 'no'; //constants not compatible with GTM :( | |
// "Globals" (not really) | |
var $; | |
// Fallback settings, in case Marketo Form2 API isn't yet loaded | |
var intervalReference; | |
var intervalElapsed = 0; | |
var intervalTimeout = 50; | |
var intervalMaxWait = 2000; | |
// Field settings | |
var gdprInputName = 'GDPR_Opt_In__c'; | |
var gdprPseudoInputName = 'PSEUDO_' + gdprInputName; | |
var onReadyCallback = function (form) { | |
var $form = form.getFormElem(); | |
var $buttonRow; | |
var newFormRowHTML; | |
var hiddenFields; | |
var $gdprPseudoCheckbox; | |
if ($form.find(':input[name="' + gdprInputName + '"]').length || form.vals().GDPR_Opt_In__c) { | |
// If this form already has a GDPR Input Field | |
// Don't try to override it | |
return false; | |
} | |
if ($form.find('.gdpr-acknowledgement-row').length) { | |
// If this callback has already been fired/loaded | |
// on this form, don't add a duplicate | |
return false; | |
} | |
$buttonRow = $form.find('.mktoButtonRow'); | |
if (!$buttonRow.length) { | |
// If there is no button row, we won't know where | |
// to add the new field... This is likely an error | |
return false; | |
} | |
newFormRowHTML = $('#gdpr-acknowledgement').html(); | |
if (!newFormRowHTML) { | |
// This should never happen because the HTML is | |
// included with this script, but let's add a | |
// graceful fallback in case something strange | |
// happens | |
return false; | |
} | |
$buttonRow[0].insertAdjacentHTML( | |
'beforebegin', | |
newFormRowHTML | |
); | |
// Add the real GDPR field into hidden fields to | |
// keep track of (and will ultimately submit) the | |
// user's selection on the pseudo-checkbox | |
hiddenFields = {}; | |
hiddenFields[gdprInputName] = MKTO_FALSE; | |
form.addHiddenFields(hiddenFields); | |
// Watch the pseudo input field and update the | |
// hidden field appropriately, when changed | |
$gdprPseudoCheckbox = $form.find('input[name="' + gdprPseudoInputName + '"]'); | |
$gdprPseudoCheckbox.change(function () { | |
var values = form.vals(); | |
if (this.checked) { | |
values[gdprInputName] = MKTO_TRUE; | |
} else { | |
values[gdprInputName] = MKTO_FALSE; | |
} | |
form.setValues(values); | |
}); | |
form.onValidate(function () { | |
// Require the GDPR field to be selected | |
if (form.vals()[gdprInputName] !== MKTO_TRUE) { | |
// Prevent form submission | |
form.submittable(false); | |
// Show error message near the checkbox | |
form.showErrorMessage( | |
'Please accept our privacy policy & terms of service to continue.', | |
$form.find('label[for="' + gdprPseudoInputName + '"]').eq(0) | |
); | |
} else { | |
// Allow form submission | |
// PS: Don't worry, the default validators | |
// will still be able to prevent submits | |
form.submittable(true); | |
} | |
}); | |
}; | |
var initialize = function () { | |
// The API comes packaged with its own version | |
// of jQuery; so, we'll rely on that, just in | |
// case the page doesn't have jQuery installed | |
$ = window.MktoForms2.$; | |
// This whenReady callback will be executed | |
// independently on every form that is loaded | |
// on the page | |
MktoForms2.whenReady(onReadyCallback); | |
}; | |
if (window.MktoForms2) { | |
// If Marketo's Forms2 API is already | |
// loaded, let's get goin'! | |
initialize(); | |
} else { | |
// Ugh. This should never happen because the Forms2 API | |
// should be loaded before this loads, but SignalFx's | |
// current setup isn't ideal, so we may have wait a bit | |
// and watch to see when MktoForms2 appears. When it does, | |
// we'll initialize the script normally. | |
intervalReference = setInterval( | |
function () { | |
if (intervalElapsed > intervalMaxWait) { | |
clearInterval(intervalReference); | |
} else { | |
if (window.MktoForms2) { | |
clearInterval(intervalReference); | |
initialize(); | |
} | |
} | |
intervalElapsed += intervalTimeout; | |
}, | |
intervalTimeout | |
); | |
} | |
}()); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment