Skip to content

Instantly share code, notes, and snippets.

@chavesm
Last active October 2, 2020 22:17
Show Gist options
  • Save chavesm/d10a61ad29fcd1b8ad6af410170b8788 to your computer and use it in GitHub Desktop.
Save chavesm/d10a61ad29fcd1b8ad6af410170b8788 to your computer and use it in GitHub Desktop.
Google Analytics Tracking Example for a Mock PopupAlly Optin Form
<~-- link href="https://cdn.jsdelivr.net/gh/marklchaves/cme-styles@1.0.0/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>
.image-caption {
border: 2px solid white;
background-image: url(https://via.placeholder.com/550x250);
}
form {
margin: 5%;
}
(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
);
}
})();
@chavesm
Copy link
Author

chavesm commented Oct 2, 2020

Live demo on CodePen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment