Forum

Thread tagged as: Question, Problem, Forms

Google Analytics Custom Event

Hi,

I'm trying to add a custom event handler for Google Analytics onto a standard submit button, but for some reason it's not being displayed on the front end. This is the code I'm using, the onclick event is being ignored:

<perch:input type="submit" value="Newsletter signup" id="btnsubmit" class="btn btn-round btn-warning center-sm btn-sm-mg" onclick="_gaq.push(['_trackEvent', 'Buttons', 'Free Chapter', 'Signed Up'])" />

My diagnostic report:

Perch Runway: 2.8.8, PHP: 5.6.8, MySQL: mysqlnd 5.0.11-dev - 20120503 - $Id: 3c688b6bbc30d36af3ac34fdd4b7b5b787fe5555 $, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (2.8.8), assets (2.8.8), categories (2.8.8), perch_blog (4.6), perch_forms (1.8.3), perch_mailchimp (2.0.1), perch_twitter (3.5.1)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', 'perch_forms', 'perch_mailchimp', 'perch_twitter' );
PERCH_LOGINPATH: /perch
PERCH_PATH: /var/sites/w/whatthefoot.co.uk/public_html/perch
PERCH_CORE: /var/sites/w/whatthefoot.co.uk/public_html/perch/core
PERCH_RESFILEPATH: /var/sites/w/whatthefoot.co.uk/public_html/perch/resources
Image manipulation: GD
PHP limits: Max upload 100M, Max POST 100M, Memory: 128M, Total max file upload: 100M
Resource folder writeable: Yes
DOCUMENT_ROOT: /var/sites/w/www.whatthefoot.co.uk/public_html
HTTP_HOST: www.whatthefoot.co.uk
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php

The full template:

<perch:form id="subscribe-form" app="perch_mailchimp" double-optin="true" send-welcome="true" role="form">

    <perch:success>
        <div class="alert alert-success" role="alert">
            <p><strong>Thank you</strong> Please check your inbox to confirm your subscription</p>
        </div>
    </perch:success>


    <div class="form-group">
        <perch:label for="cname" class="sr-only">First name</perch:label>
        <perch:input id="cname" type="text" mailer="FNAME" class="form-control" placeholder="First name" />
    </div>
    <div class="form-group">
        <perch:label for="lname" class="sr-only">Last name</perch:label>
        <perch:input id="lname" type="text" mailer="LNAME" class="form-control" placeholder="Last name" />
    </div>
    <div class="form-group">
        <perch:label for="cemail" class="sr-only">Email *</perch:label>
        <perch:input id="cemail" required="true" type="email" mailer="email" class="form-control" placeholder="Your E-mail *" data-validation-required-message="Please enter your email address." />
        <perch:error type="required" for="email"><p class="help-block text-danger">Your email address is required</p></perch:error>
    </div>   
    <div>
        <perch:input type="submit" value="Newsletter signup" id="btnsubmit" class="btn btn-round btn-warning center-sm btn-sm-mg" onclick="_gaq.push(['_trackEvent', 'Buttons', 'Free Chapter', 'Signed Up'])" />
        <perch:input type="hidden" value="1" id="confirm" mailer="confirm_subscribe" />
    </div>
</perch:form>
Robin Waite

Robin Waite 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Have you resaved the region since changing your template?
Robin Waite

Robin Waite 0 points

6 years ago

That's what I thought we would need to do, however there isn't a region for the template which we can save.

The code which calls the template is:

<?php perch_mailchimp_form('mailchimp_form.html'); ?>
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Ah, of course. I was looking at the class attribute wondering why that wouldn't work, and it's the onclick attribute as you pointed out.

We don't have passthrough for those on attributes, as they're a bit old hat. Could you implement it with a data- attribute instead? Something like:

data-ga-push="['_trackEvent', 'Buttons', 'Free Chapter', 'Signed Up']"

And then attach the click handlers dynamically, e.g. for jQuery:

$('[data-ga-push').on('click', function(e){
    var me = $(e.target);
    _gaq.push(me.attr('data-ga-push'));
    return true;
});

(Along those lines - I've not tested it!)
Robin Waite

Robin Waite 0 points

6 years ago

Ah ok, the data- attribute has passed through ok, however it has encoded the apostrophes:

data-ga-push="[&#039;_trackEvent&#039;, &#039;Buttons&#039;, &#039;Free Chapter&#039;, &#039;Signed Up&#039;]"

Is there a quick way to prevent that?
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Oh, yuck. Does encode="false" help here?
Robin Waite

Robin Waite 0 points

6 years ago

Unfortunately not, I've tried encode, urlencode and escape and none of them appear to make any difference.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Yes, it looks like quotes are always escaped. That's inconvenient.

data-ga-push="_trackEvent|Buttons|Free Chapter|Signed Up"

and

_gaq.push(me.attr('data-ga-push').split('|'));

might work.
Robin Waite

Robin Waite 0 points

6 years ago

Awesome, yes, appears to be working now and no errors on the javascript so I will double check analytics over the weekend and see if the event has been successfully triggered. Many thanks for your help.