Integrate Google Analytics into Submission Form DataPages

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 an article on Analytics Talk entitled Integrating Google Analytics with a CRM. This article assumes you have already created a Submission Form.

Steps to log Google Analytics information in new record submissions:

1. Add the following 7 fields into your table.

New fields must be added to the base table of the Submission Form for which you are configuring Google Analytics. Navigate to the Tables listing and select your Submission Form’s base table. Click Design to open the table in design view. Add the following 7 fields. The data type should be set to Text(255). Click Save.

  • GA_Source
  • GA_Medium
  • GA_Term
  • GA_Content
  • GA_Campaign
  • GA_Segment
  • GA_nVisits

Tech_tip_integrate_google_analytics_into_submission_form_DataPages_1

2. Add the fields to your Submission Form

  1. Navigate to the DataPages listing, select the Submission Form, and click Edit.
  2. Next, you 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.

Tech_tip_integrate_google_analytics_into_submission_form_DataPages_2

3. Insert header and footer sections

On the Configure Fields screen, you insert Header & Footer sections. Click the Insert button at the lower right-hand corner of the DataPage Elements panel. Select Header & Footer to insert these sections.
Tech_tip_integrate_google_analytics_into_submission_form_DataPages_3

4. Paste the following JavaScript into your footer

Select the Footer section and paste the following JavaScript. Click Finish to save your DataPage.

<script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://www.":"http://www.");document.write("<script src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'>"+"</sc"+"ript>");</script><script type='text/javascript'>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;</script>

5. Deploy the code into your HTML page:

Paste the following JavaScript into your webpage <head> section.

<script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write("<script>

6. Test the Google Analytics Fields

Once the Submission Form has been edited and configured, you can now 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 Bridge 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. When you arrive 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)”.

7. 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 field and set the Form Element dropdown to Hidden.

Tech_tip_integrate_google_analytics_into_submission_form_DataPages_4

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.

To fully take advantage of Google Analytics, sign up for a free account here: http://www.google.com/analytics/. You will receive a few lines of code that must be added to your web page headers.

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's 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.