Track "Form Abandonment" med jQuery og Google Analytics

Tillader mig lige at følge med her

<ole>

Første linje i forordet til 'Håndbog for webudvikling for begyndere': "Slå fejlmeldinger til i din browser!". Sorry, men det er skræmmende, så ofte man er nødt til at nævne denne helt nødvendige regel  =)


Den udeladelse må helt sikkert smide en JS-fejl, der forklarer - i hvertfald cirka - hvor fejlen ligger  *o)

/mvh
</bole>

- og ellers kan du jo alert'e indholdet af dit objekt:


Så vil du opdage, at det sidste element i array'et ikke indeholder det forventede - og dermed, at noget må være gået galt i linjen, jeg viste ovenfor  =)

olebole, :-)

Nu sidder jeg med Safari og har aktiveret "fejlkonsol" som siger:
TypeError: 'undefined' is not an object (evaluating 'jQuery.url.attr')

Det skyldes nok at jeg ikke bruger den "jquery url parser" der kræves for at jeg kan få URL'en af den pågældende side smidt i variablen "currentPage"med > currentPage = jQuery.url.attr("path");

Måske jeg kan komme udenom den ved blot at få url'en fra en funktion?:
function fetchURL() {    return location.pathname;    }

Men det er stadig som om den slet ikke registrerer linie 4 hvor den skal tjekke på om der er indtastet noget i input-feltet, og hvis der er, så køre linie 5+. Der kommer ikke noget op i hverken konsollen eller firebug.

1: jQuery(document).ready(function($) {
2.      var currentPage = jQuery.url.attr("path");
3.      $(':input').blur(function() {
4.          if($(this).val().length > 0){
5.              _gag.push(['_trackEvent', 'Form: ' + currentPage, 'input_exit', $(this).attr('name')]);
6.          }
7.      });
8.  });

Min formular lidt forkortet ser således ud:

<form class="form2">
<fieldset>
 
<input type="text" name="fullname" id="name" class="text" value="Navn" title="Navn" />
<input type="text" name="emailaddress" id="emailaddress" class="text" value="Email" title="Email">

<textarea name="comment" id="comment" class="comment" title="Kommentar">Kommentar</textarea>

<select name="subject" id="subject" class="select">
<option value="">Vælg... </option>
<option value="Option1">Valg1</option>
<option value="Option2">Valg2</option>
<option value="Option3">Valg3</option>
</select>
   
<input type="submit" name="submit" class="button" value="Send" />
   
</fieldset>
</form>

Hvert input-felt har desuden en default value som ryddes når der klikkes i feltet (fokus) men kun hvis der ikke allerede er indtastet noget af brugeren. Det samme med blur, hvis der klikkes væk går den ikke tilbage til default value hvis der allerede er indtastet noget af brugeren.

"Hvert input-felt har desuden en default value som ryddes når der klikkes i feltet (fokus) men kun hvis der ikke allerede er indtastet noget af brugeren. Det samme med blur, hvis der klikkes væk går den ikke tilbage til default value hvis der allerede er indtastet noget af brugeren."

Så kommer det vel an på rækkefølgen af de handlers, du bruger på feltets blur-event. Hvis du udfylder feltet med dets default-værdi, før du spørger på dennes length, vil dette check naturligvis altid vise indhold i feltet  *o)

Hvilken handler, der afvikles først, afgøres af, hvilken handler er sat først.

Ja jeg tænkte også der kunne være nogle konflikter der, så derfor prøvede jeg også at:

- Fjerne alt form-validering
- Fjerne blur/fokus scriptet på input-felterne
- Fjerne alle default values på hvert input felt

Så der faktisk kun er den éne handler tilbage der skal registere der er indtastet i inputfelterne og dermed køre Google Analytics eventen. Men den registerer intet og ingen fejlmeddelser. :/

Prøv at alert'e dine værdier. F.eks:

Jamen det virker. Der kommer en køn dialogboks op med inputfeltets værdi når man klikker væk (blur) med dette script :-)

jQuery(document).ready(function($) {
      $(':input').blur(function(e) {
          alert($(this).val());
    });
});

Men hvis jeg så smider den nødvendige IF-betingelse ind så virker det ikke mere:
if ($(this).val().length > 0){

Jeg har fundet ud at denne linie måske har været årsagen til at blokere noget i funktionen:
var currentPage = jQuery.url.attr("path");

Tager jeg den linie ud af funktionen og f.eks. har:

1: jQuery(document).ready(function($) {
2:      $(":input").blur(function(e) {
3:                  if ($(this).val().length > 0){
4:                _gag.push(['_trackEvent', 'Form: ' + currentPage, 'input_exit', 'labeltext', '']);
5:                }
6:        });
7:  });

Får jeg fejlen: ReferenceError: _gag is not defined

Det betyder da at den kommer ned til _gag men den siger dog at den ikke er defined.

Dét lyder sært! Hvad får du ud af:

Så får jeg værdien på antal tegn i input-feltet så det virker vel efter hensigten.

Så må du jo alert'e videre for at finde ud af, om det er den linje, der laver ged:

Nu har jeg testet, testet og testet mere de sidste 7-8 timer. Det er faktisk utrolig dejligt man kan se hvad der virker og bliver sendt igennem til Google Analytics via konsollen i browseren. ;-) Jeg har fundet frem til at det er denne funktion omkring det øvrige der er skyld i at den ikke bliver sendt, foruden en lille irreterende typo i min kode:

if ($(this).val().length > 0) {
.....
.....
}

Så langt så godt! :-)

Jeg ved ikke om du kan se nogen andre måder at lave det tjek på?

Nej, den linje skal ikke laves om. Den er helt korrekt og skal virke, så fejlen må ligge et andet sted. Mon ikke du har en typo et eller flere andre steder?  =)

Tak olebole, du havde ret igen. :-)
Vil du have points?

(lukker)