Difference between revisions of "Tracking Forms (JavaScript)"

From Market Ruler Help
Jump to: navigation, search
(Created page with 'The '''cr_submit''' function is a JavaScript function which enables you to track when visitors to your web site submit a form. == Simple implementation == The syntax for usi…')
 
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
The '''cr_submit''' function is a [[JavaScript]] function which enables you to track when visitors to your web site submit a form.
+
The '''__CR.submit''' function is a [[JavaScript]] function which enables you to track when visitors to your web site submit a form.
  
 
== Simple implementation ==
 
== Simple implementation ==
The syntax for using '''cr_submit''' in a form is as follows:
+
The syntax for using '''__CR.submit''' in a form is as follows:
  
 
'''Before:'''
 
'''Before:'''
Line 15: Line 15:
  
 
'''After:'''
 
'''After:'''
<pre><form method="post" action="." onsubmit="return cr_submit(this, '1')">
+
<pre><form method="post" action="." onsubmit="return __CR.submit(this, '1')">
 
     <label for="first_name">First Name</label>
 
     <label for="first_name">First Name</label>
 
     <input type="text" name="first_name" value="" />
 
     <input type="text" name="first_name" value="" />
Line 30: Line 30:
 
Note that the [[Action Code]] (in this case, "1") will change for different actions.
 
Note that the [[Action Code]] (in this case, "1") will change for different actions.
  
Finally, note that you need to [[Install the Tracking Snippet]] on each page where you use '''cr_submit''' for the above code to work.
+
Finally, note that you need to [[Install the Tracking Snippet]] on each page where you use '''__CR.submit''' for the above code to work.
  
 
== Advanced implementation ==
 
== Advanced implementation ==
If you want to track a link which already has the '''onsubmit''' attribute in use, then you'll need to modify how you invoke it:
+
If you want to track a form which already has the '''onsubmit''' event in use, then you'll need to modify how you invoke it:
  
 
'''Before:'''
 
'''Before:'''
Line 39: Line 39:
  
 
'''After:'''
 
'''After:'''
<pre><form method="post" action="." onsubmit="return validate_form() ? cr_submit(this,'1') : false"> ... </form></pre>
+
<pre><form method="post" action="." onsubmit="return validate_form() ? __CR.submit(this,'1') : false"> ... </form></pre>
 +
 
 +
'''Alternate:'''
 +
<pre><form method="post" action="." onsubmit="if (validate_form()) { return __CR.submit(this,'1'); } else { return false; }"> ... </form></pre>
  
 
The above solution may change on a case-by-case basis. If you are ever in need of assistance, please contact [[ConversionRuler Support]].
 
The above solution may change on a case-by-case basis. If you are ever in need of assistance, please contact [[ConversionRuler Support]].
Line 50: Line 53:
 
* [[JavaScript onclick]]
 
* [[JavaScript onclick]]
 
* [[Tracking Links (JavaScript)]]
 
* [[Tracking Links (JavaScript)]]
 +
* [[When to use __CR.submit, __CR.link, and __CR.track]]
  
 
[[Category:ConversionRuler]]
 
[[Category:ConversionRuler]]
 
[[Category:ConversionRuler JavaScript Functions]]
 
[[Category:ConversionRuler JavaScript Functions]]
 
[[Category:Technical]]
 
[[Category:Technical]]
[[Category:Snippet]]
+
[[Category:ConversionRuler Installation]]

Latest revision as of 15:40, 26 February 2016

The __CR.submit function is a JavaScript function which enables you to track when visitors to your web site submit a form.

Simple implementation

The syntax for using __CR.submit in a form is as follows:

Before:

<form method="post" action=".">
    <label for="first_name">First Name</label>
    <input type="text" name="first_name" value="" />
    <label for="last_name">Last Name</label>
    <input type="text" name="last_name" value="" />
    <label for="email">Email</label>
    <input type="text" name="email" value="" />
</form>

After:

<form method="post" action="." onsubmit="return __CR.submit(this, '1')">
    <label for="first_name">First Name</label>
    <input type="text" name="first_name" value="" />
    <label for="last_name">Last Name</label>
    <input type="text" name="last_name" value="" />
    <label for="email">Email</label>
    <input type="text" name="email" value="" />
</form>

Specifically, you will add an JavaScript onsubmit handler to your form to invoke our tracking prior to the user submitting the form.

Add this code to any link you wish to track. As well, you will likely need to create a Conversion Action to assign to each type of link you want to track.

Note that the Action Code (in this case, "1") will change for different actions.

Finally, note that you need to Install the Tracking Snippet on each page where you use __CR.submit for the above code to work.

Advanced implementation

If you want to track a form which already has the onsubmit event in use, then you'll need to modify how you invoke it:

Before:

<form method="post" action="." onsubmit="return validate_form()"> ... </form>

After:

<form method="post" action="." onsubmit="return validate_form() ? __CR.submit(this,'1') : false"> ... </form>

Alternate:

<form method="post" action="." onsubmit="if (validate_form()) { return __CR.submit(this,'1'); } else { return false; }"> ... </form>

The above solution may change on a case-by-case basis. If you are ever in need of assistance, please contact ConversionRuler Support.

As always, there are tools in ConversionRuler to help you do this.

See also =