• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Google Analytics Event after submission

prophoto

Active Member
Is this still valid?

If what you are trying to do is fire off a call to _gaq_push() whenever the user moves from one page to another, you'd need to add an event handler for the 'fabrik.form.change.page.end' event.

So create a ./components/com_fabrik/js/form_X.js file (where X is the numeric ID of your form. Fabrik will automagically include that JS on your form page. In that file, you'll need to do something like ...

Code:
window.addEvent('fabrik.loaded', function () {
    Fabrik.addEvent('fabrik.form.change.page.end', function (form) {
        // insert your code here, current page num should be in form.currentPage, probably like this ...
        _gaq.push (['_ trackPageview', '/your_form_sef_link?start_page' + form.currentPage']);
    });
});

Note that the start_page=X is an actual query string arg, so if you append that to the URL for a Fabrik multi-page form, the page should load with the form on the specified page (with page numbering starting from 0).

I can't recall offhand if the outer event, the window.addEvent() is still necessary, which is waiting for the main Fabrik JS init to finish, and the main Fabrik object to become available for use. I seem to recall we now delay requiring the form_X.js files until that's done, but I may be wrong. So it's possible that this code may never run, as fabrik.loaded may have already been fired prior to the form_X.js getting loaded.

If that happens, remove that outer event, and just do the Fabrik.addEvent(), which triggers whenever the user changes pages in a multi-page form. The page.end event triggers once the page changing is done (so after validation etc). There is also a page.start event, which triggers as soon as they hit the button, but the page may not actually ever change (if it fails vaidation).

NOTE - I don't usually go in to this much detail on Community posts (this is more of a "Standard" subscription level response), but I'm kind of helping genyded get a handle on how Fabrik does things.

-- hugh
 
I have absolutely no clue about the Google analytics stuff. Also your question seems to be about "after submission", the post you quoted is about moving from one page to another in a multipage form.

The window.addEvent is no longer correct, anything you want to do with the Fabrik object, you have to use the requirejs dependency manager, to wait until Fabril loads ...

Code:
requirejs(['fab/fabrik'], function () {
   // your code that does Fabrik stuff here ...
});

So perhaps explain more about what you are trying to do?

-- hugh
 
I'd like a general solution to track form submissions in Google Analytics. It seems the proper way is to do it as an Event. Most of my forms are single pagers. I can obviously already track page loads with GA, but would like that Event in there for actual submissions.

Would I add this into form_x.js? How do I get it to fire after form submission? As always thanks for your help!

Code:
requirejs(['fab/fabrik'], function () {
ga('send', 'event', 'Contact Form', 'submit');
});

Official doc pages: https://support.google.com/tagmanager/answer/6106716?hl=en#FormSubmit
https://developers.google.com/analy...ticsjs/events#outbound_link_and_form_tracking

Another how-to: https://contactform7.com/tracking-form-submissions-with-google-analytics/
 
Code:
requirejs(['fab/fabrik'], function () {
   Fabrik.addEvent('fabrik.form.submit.start', function(form, event, btn) {
      // any code you want to run at the start of form submission goes here
      // if you want to abort submission, set form.result = false ...
      // form.result = false;
      ga('send', 'event', 'Contact Form', 'submit');
   }
});

-- hugh
 
Code:
requirejs(['fab/fabrik'], function () {
   Fabrik.addEvent('fabrik.form.submit.start', function(form, event, btn) {
      // any code you want to run at the start of form submission goes here
      // if you want to abort submission, set form.result = false ...
      // form.result = false;
      ga('send', 'event', 'Contact Form', 'submit');
   });
});
 
Does this fire every time the user clicks submit, even if the form does not validate? Is it possible to restrict it to only fire when the form submits successfully?
 
Yes, it fires on every submit. No, you can't have it only fire after a successful validation, as that happens on the server side after the JS submit runs. Maybe you could embed it on a landing page specific to this form, which you redirect this form to.
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top