We have a site that uses Marketo embedded Marketo forms. We want to implement a bit more sophisticated conversion tracking other than a button click for form submission. The thought is we would work with the Forms 2.0 API and utilize the onSuccess callback. After a successful callback we would push the conversion to Google Analytics.
I'm not a coder by trade but my understanding is that I would use a variation of this code.
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function(form) {
// Add an onSuccess handler
form.onSuccess(function(values, followUpUrl) {
// Get the form's jQuery element and hide it
form.getFormElem().hide();
// Return false to prevent the submission handler from taking the lead to the follow up url
return false;
});
});
According to this article it is suggested that something along the lines of the following code be inserted
ga('send', 'event', {
eventCategory: 'event_registration',
eventAction: 'form-submit',
eventLabel: 'page title' // I'm planning on replacing this with a dynamic value that grabs the page title if possible
});
in place of
form.getFormElem().hide();
The final comment in that article suggests the code is incomplete and the user should use the GA hitCallback feature.
This article seems to give some hints on how to do this since they use the hitCallback function with the onSuccess handler but I am not sure I completely understand how it functions. This is also utilizing the data layer instead of the just pushing the event into Google Analytics as the first bit of code does.
The code:
form.onSuccess(function(values, followUpUrl){
dataLayer.push({
'event': 'marketo.success',
'marketo.form_id': form_id,
'marketo.form_values': values,
'eventCallback': function() {
dataLayer.push({
'marketo.follow_up_url': followUpUrl
})
}
});
I'm fine with using the data layer since I'd want to use this data in other analytics platforms. My question is how do I implement this? Should it look something like this?
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function(form) {
// Add an onSuccess handler
form.onSuccess(function(values, followUpUrl) {
form.onSuccess(function(values, followUpUrl){
dataLayer.push({
'event': 'marketo.success',
'marketo.form_id': form_id,
'marketo.form_values': values,
'eventCallback': function() {
dataLayer.push({
'marketo.follow_up_url': followUpUrl
})
}
});
return false;
});
});
Any thoughts on how to fully implement this from the code to what needs to be set up in Google Tag Manager?
Adchoices