Advertisement
Guest User

Marketo event listener for GTM

a guest
Jan 31st, 2023
1,505
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.67 KB | Source Code | 0 0
  1. <script>
  2. /**
  3.  * push Marketo form events and values to Google Tag Manager via the data layer
  4.  * uses the Marketo Forms 2.0 API
  5.  */
  6. (function marketoFormListener (MktoForms2) {
  7.     "use strict";
  8.     /**
  9.      * helper function to push invalid Marketo field errors to GTM
  10.      * @returns {undefined}
  11.      */
  12.     function waitForError () {
  13.         var element, input, mktoErrorMsg;
  14.         // check for error message
  15.         element = document.querySelector(".mktoErrorMsg");
  16.         if (element) {
  17.             mktoErrorMsg = element.textContent || element.innerText;
  18.             // look for invalid input
  19.             input = document.querySelector("input.mktoInvalid, .mktoInvalid input");
  20.             window.dataLayer.push({
  21.                 "event": "mkto.form.error",
  22.                 "mkto.form.error.message": mktoErrorMsg,
  23.                 "gtm.element": input,
  24.                 "gtm.elementClasses": input && input.className || "",
  25.                 "gtm.elementId": input && input.id || "",
  26.                 "gtm.elementName": input && input.name || "",
  27.                 "gtm.elementTarget": input && input.target || ""
  28.             });
  29.         }
  30.     }
  31.  
  32.     if (MktoForms2) {
  33.         MktoForms2.whenReady(function handleReady (form) {
  34.             window.dataLayer.push({
  35.                 "event": "mkto.form.ready",
  36.                 "mkto.form.id": form.getId(),
  37.                 "mkto.form.submittable": form.submittable(),
  38.                 "mkto.form.allFieldsFilled": form.allFieldsFilled(),
  39.                 "mkto.form.values": form.getValues()
  40.             });
  41.  
  42.             form.onValidate(function handleValidate (valid) {
  43.                 window.dataLayer.push({
  44.                     "event": "mkto.form.validate",
  45.                     "mkto.form.valid": valid
  46.                 });
  47.                 // wait for the error message to appear
  48.                 setTimeout(waitForError, 0);
  49.             });
  50.  
  51.             form.onSubmit(function handleSubmit (thisForm) {
  52.                 var button;
  53.                 button = form.getFormElem().find("button[type=\"submit\"]");
  54.                 window.dataLayer.push({
  55.                     "event": "mkto.form.submit",
  56.                     "mkto.form.id": form.getId(),
  57.                     "mkto.form.submittable": form.submittable(),
  58.                     "mkto.form.allFieldsFilled": form.allFieldsFilled(),
  59.                     "mkto.form.values": form.getValues(),
  60.                     "mkto.form.button": {
  61.                         "classes": button.attr("class"),
  62.                         "text": button.text(),
  63.                         "type": "submit"
  64.                     }
  65.                 });
  66.             });
  67.  
  68.             form.onSuccess(function handleSuccess (values, followUpUrl) {
  69.                 window.dataLayer.push({
  70.                     "event": "mkto.form.success",
  71.                     "mkto.form.id": form.getId(),
  72.                     "mkto.form.values": values,
  73.                     "mkto.form.followUpUrl": followUpUrl,
  74.                     "eventCallback": function () {
  75.                       document.location.href = followUpUrl;
  76.                     },
  77.                     "eventTimeout" : 3000
  78.                   });
  79.                   return false;
  80.              });
  81.  
  82.         });
  83.  
  84.         MktoForms2.whenRendered(function handleRendered (form) {
  85.             window.dataLayer.push({
  86.                 "event": "mkto.form.rendered",
  87.                 "mkto.form.id": form.getId(),
  88.                 "mkto.form.submittable": form.submittable(),
  89.                 "mkto.form.allFieldsFilled": form.allFieldsFilled(),
  90.                 "mkto.form.values": form.getValues()
  91.             });
  92.         });
  93.     }
  94. })(window.MktoForms2);
  95.   </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement