Integrating Google Analytics into Submission Form DataPages

3 minutes to read

Caspio Submission Forms can be configured to capture the user tracking information used by Google Analytics. This way you get statistical information that pertains directly to “active” site users. Google Analytics also offers a tool to create URL’s tagged with additional information so you can monitor the efficiency of individual online campaigns.

This solution is adapted from the article Integrating Google Analytics with CRM posted on the Justin Cutroni’s Analytics Talk blog.

Prerequisites:

Before you apply the solution presented below, make sure you already have created a Submission Form and you are familiar with Google Analytics and their terminologies.

Steps:

Add the following fields into your Submission Form’s base table for which you are configuring Google Analytics. Set the data type to Text(255).
- GA_Source
- GA_Medium
- GA_Term
- GA_Content
- GA_Campaign
- GA_Segment
- GA_nVisits
Add the fields to your Submission Form.
1. Edit the Submission Form.
2. Add the newly added fields into your Submission Form. Move all of the Google Analytics fields to the right-hand panel using the arrow button.
On the Configure Fields screen, insert Header & Footer sections.
Insert the following JavaScript into the Footer section. Go to the Source mode and insert the following JavaScript.
Deploy the code into your HTML page.
Paste the following JavaScript into your webpage section.
Test the Google Analytics Fields.
Once the Submission Form has been edited and configured, you can test the Google Analytics Fields.
1. Click Preview of the Submission Form you have just modified. The Google Analytics fields should be populated with some data. The data within Caspio may not be accurate, but if some data appears, you know the fields are functioning.
2. If you have a webpage that is indexed by Google, you can also test by embedding this DataPage in the indexed webpage. Go to Google, search, and click through to that webpage. The DataPage should indicate Google as the GA_Source value, and also indicate the search term you used in GA_Term.
3. If you do not have a page indexed by Google, just embed the DataPage and then go directly to the site. The Source should read as “(direct)”.
Hide the Google Analytics Fields.
Once you are sure that the form is receiving data, you can edit the DataPage again. Edit the Submission Form and on the Configure Fields screen, select each of the Google Analytics fields and set the Form Element dropdown to Hidden.
Now, whenever a user submits the form, these fields will be automatically populated with the Google Analytics data.

Create Specially Formatted Analytics Links

To better analyze your website traffic, you can create specially formatted links that will provide information directly to these Google Analytics fields. Google provides an online tool to create a special URL that you can use in your online promotions.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<script type="text/javascript"> 
      document.addEventListener('DataPageReady', function (event) { 
      var script = document.createElement("script"); 
      script.src = 
        document.location.protocol + "//www.google-analytics.com/ga.js"; 
      script.type = "text/javascript"; 
      script.async = true; //If you want to load script immediately, set to false 
      script.onload = function() { 
        if (typeof _gat !== "undefined") { 
          var pageTracker = _gat._getTracker("UA-1-1"); 
          pageTracker._trackPageview(); 
          function _uGC(l, n, s) { 
            if (!l || l == "" || !n || n == "" || !s || s == "") return "-"; 
            var i, 
              i2, 
              i3, 
              c = "-"; 
            i = l.indexOf(n); 
            i3 = n.indexOf("=") + 1; 
            if (i > -1) { 
              i2 = l.indexOf(s, i); 
              if (i2 < 0) { 
                i2 = l.length; 
              } 
              c = l.substring(i + i3, i2); 
            } 
            return c; 
          } 
          var z = _uGC(document.cookie, "__utmz=", ";"); 
          var source = _uGC(z, "utmcsr=", "|"); 
          var medium = _uGC(z, "utmcmd=", "|"); 
          var term = _uGC(z, "utmctr=", "|"); 
          var content = _uGC(z, "utmcct=", "|"); 
          var campaign = _uGC(z, "utmccn=", "|"); 
          var gclid = _uGC(z, "utmgclid=", "|"); 
          if (gclid != "-") { 
            source = "google"; 
            medium = "cpc"; 
          } 
          var csegment = _uGC(document.cookie, "__utmv=", ";"); 
          if (csegment != "-") { 
            var csegmentex = /[1-9]*?.(.*)/; 
            csegment = csegment.match(csegmentex); 
            csegment = csegment[1]; 
          } else { 
            csegment = "(not set)"; 
          } 
          var a = _uGC(document.cookie, "__utma=", ";"); 
          var aParts = a.split("."); 
          var nVisits = aParts[5]; 
          document.getElementById("InsertRecordGA_Source").value = source; 
          document.getElementById("InsertRecordGA_Medium").value = medium; 
          document.getElementById("InsertRecordGA_Term").value = term; 
          document.getElementById("InsertRecordGA_Content").value = content; 
          document.getElementById("InsertRecordGA_Campaign").value = campaign; 
          document.getElementById("InsertRecordGA_Segment").value = csegment; 
          document.getElementById("InsertRecordGA_nVisits").value = nVisits; 
        } 
      }; 
      document.body.appendChild(script); 
}); 
</script>

code2

<script type="text/javascript"> 
      var script = document.createElement("script"); 
      script.src = 
        ("https:" == document.location.protocol 
          ? "https://ssl." 
          : "http://www.") + "google-analytics.com/ga.js"; 
      script.async = true; //If you want to load script immediately, set to false 
      document.body.appendChild(script); 
</script>