instapage_event_tracking.js

!function () {
  var analytics = window.analytics = window.analytics || []; 
  if (!analytics.initialize) if (analytics.invoked) window.console && console.error && console.error("Segment snippet included twice."); 
  else {
    analytics.invoked = !0; 
    analytics.methods = ["trackSubmit", "trackClick", "trackLink", "trackForm", "pageview", "identify", "reset", "group", "track", "ready", "alias", "debug", "page", "once", "off", "on"]; 
    analytics.factory = function (t) { 
        return function () { 
          var e = Array.prototype.slice.call(arguments);
          e.unshift(t);
          analytics.push(e);
          return analytics 
        }
      }; 
    
    for (var t = 0; t < analytics.methods.length; t++) { 
      var e = analytics.methods[t];
      analytics[e] = analytics.factory(e) 
    }
    
    analytics.load = function (t, e) { 
      var n = document.createElement("script");
      n.type = "text/javascript";
      n.async = !0;
      n.src = "https://cdn.segment.com/analytics.js/v1/" + t + "/analytics.min.js";
      var a = document.getElementsByTagName("script")[0];
      a.parentNode.insertBefore(n, a);
      analytics._loadOptions = e 
    };

    analytics.SNIPPET_VERSION = "4.1.0";
    analytics.load("gpbqtqPqiykgimOaxSjK41Kgha6K2cjS");

    // We can pass more data to this event.
    analytics.page();

    // ========  Event tracking code  ========
    
    // My understanding is that we only have access to 2 instapage events (the ones I found in instapage.com):
    //   - instapageFormSubmitSuccess
    //   - instapageAnchorClick
    
    // An alternative is to add callbacks to `analytics`(segment) not familiar with this but in my TODO.

    // callback to trigger code upon a landing page form submit
    var formCallback = function (form) {
      
      // Simple way to access form data
      var formData = new FormData(form);

      // Instapage is a bit quirky with how it captures values of the form submit, but you should be 
      // able to use this code and replace the form fields with whatever your page is capturing.

      // This is an option to fetch form fields values, we depend on names. 
      // We could do something fancier to avoid this dependency. 1) read keys 2) fetch and dump in object (manual serializer)
      // Prob best option to make generic tracks. One that fits all
      var name = formData.get('Name');
      var email = formData.get('Email address');
      var phone = formData.get('Phone number');
      var zipCode = formData.get('Zip code');
      var numberOfAcres = formData.get('Number of acres');

      // Segment event track call. You'll want to capture the variant for a/b testing purposes.
      // Here is where we need to replace this code for Avo code if we want
      // Add more fields (Jira card)
      this.analytics.track("Form Submission", {
        pageDomain: window.__page_domain,
        name: name,
        email: email,
        phone: phone,
        zipCode: zipCode,
        numberOfAcres: numberOfAcres,
      });
    };

    window.instapageFormSubmitSuccess = formCallback.bind(this);
  }

  // Generic track trigger to any click event
  var clickCallback = function (element) {

    // I was not able to add more granular data to the event...
    // Inner html could be enough (?)
    this.analytics.track("Click event", {
      pageDomain: window.__page_domain,
      buttonInfo: element.innerText
    });
  };

  window.instapageAnchorClick = clickCallback.bind(this);
}();