Google Analytics Tracking Example for a Mock PopupAlly Optin Form

961756-popupally-form-index.html

<~-- link href="https://cdn.jsdelivr.net/gh/marklchaves/[email protected]/dist/cme-styles.min.css" rel="stylesheet" / -->
  
<div class="image-caption" style="width:694px;margin-top:0px;margin-bottom:px;margin-right:auto;margin-left:auto;">
  <img alt="GET INSTANT ACCESS" src="https://via.placeholder.com/550x250" class="full-width lazyloaded" data-ll-status="loaded" border="0">
</div>

<form action="#" method="POST" sejds-popupally-pro-anti-spam-uengs="hts/t29ifsosf.o/p/ompoescc2e39092de8df6a" qweokgj-popupally-pro-anti-spam-mwhgser="tp:/s6.nuinotcmapfr/rcs/d9d04fde426bab8b" popupally-pro-popup="77" class="popupallypro-signup-form-sijfhw popupally-pro-inner-rwnkmg-77">
  <div class="image-1-pro-rwnkmg"></div>
  <div class="image-2-pro-rwnkmg"></div>
  <div class="desc-pro-rwnkmg">
    Enter your name and email to get instant access to the PDF
  </div>
  <div class="textbox-1-pro-rwnkmg"></div>
  <div class="textbox-2-pro-rwnkmg">
    <p style="
        text-align: center;
        font-size: 12px;
        line-height: 14px;
        color: #ffffff;
      ">
      When you sign up, you'll also receive regular updates on building a
      successful online business.
    </p>
  </div>
  <input type="hidden" name="inf_form_xid" value="cdc92de0349f0d9e24d2e68bdafb68ab" /><input type="hidden" name="inf_form_name" value="9 to 5~br~Velocity Plan ~br~Home" /><input type="hidden" name="infusionsoft_version" value="1.70.0.107851" /><input type="text" name="inf_field_FirstName" required="required" class="field-pro-rwnkmg-name" placeholder="First Name" /><input type="hidden" name="" class="field-pro-rwnkmg-lname" placeholder="Last name" /><input type="email" name="inf_field_Email" required="required" class="field-pro-rwnkmg-email" placeholder="Email" /><input type="submit" class="popupally-pro-form-submit submit-pro-rwnkmg" value="GET IT!" />
</form>

961756-popupally-form.css

.image-caption {
  border: 2px solid white;
  background-image: url(https://via.placeholder.com/550x250);
}

form {
  margin: 5%;
}

961756-popupally-form.js

(function () {
  //if (document.URL !== "https://myverycool.site/form-page/") return;

  // CTA label
  const label1 = "get-instant-access";

  // Optin form label
  const label2 = "escape-velocity-plan-popup-optin";

  // Optin CTA image
  const img961756 = document.querySelector(".image-caption");

  // Optin form
  const form961756 = document.querySelector(
    "form.popupally-pro-inner-rwnkmg-77"
  );

  // Optin form submit button
  const subBtn961756 = document.querySelector(
    "input.popupally-pro-form-submit"
  );

  // Record the CTA conversion
  if (img961756) {
    img961756.addEventListener(
      "click",
      function (evt) {
        console.log("image click");
      },
      /* STUBBED
          __gaTracker(
          "send",
          "event",
          "form",
          "conversion",
          label1,
          1
        );
        */
      false
    );
  }

  // Record the form impression
  if (form961756) {
    form961756.setAttribute("id", label2);
  }

  // Record the form conversion
  if (subBtn961756) {
    subBtn961756.addEventListener(
      "click",
      function (evt) {
        // Avoid false positives.
        if (!form961756.checkValidity()) return;
        console.log("button click");
        /* STUBBED
          __gaTracker(
          "send",
          "event",
          "form",
          "conversion",
          label2,
          1
        );
        */
      },
      false
    );
  }
})();

Live demo on CodePen.