Google Analytics onclick event tracking on modals

[Prezne]

I’ve found several topics on this forum about event tracking on regular buttons but none seem to be working on modals.

How can i implement Google Analytics onclick event tracking on modals?

[Rui Guerreiro – SUPPORT]

Hi,

Not sure about this, will forward to our development team.

-Rui

[Swift Ideas – Ed]

Hi @Prezne

The modal button has data-toggle=”modal” on the anchor tag, are you able to track this in combination with the href?

– Ed

[Prezne]

I have 10+ modals on one page, so i need to know which ones are clicked. Not just if any modal is clicked, but which ones.

Can i track which ones are being clicked with that method? If yes, how?

[Swift Ideas – Ed]

Hi @Prezne

You’d need to track the href attribute on the button – that will indicate which one is clicked.

Thanks,

– Ed

[Prezne]

A modal doesn’t open a link, it just creates an overlay with content in it. The shortcode does not allow the specification of the href attribute for modals.

Buttons can, but modals can’t.

Maybe the formulation of my question was not clear. The question is: How can i track which modals are opened?

[Swift Ideas – Ed]

Hi @Prezne,

We know it doesn’t open a link, however, each modal button has an href value which identifies which modal to open when it’s clicked. This is what I was referring to you trying to track with the modal button click.

– Ed

[Prezne]

Hello there,

I’ve seen that different modals have different numeric href values. Maybe i’m missing something but i don’t see how i can track those as Google Analytics events.

Modals shortcodes don’t allow me to modify the <a> tag. Google Analytics event tracking requires me to add an onClick event to the <a> tag like this:

<a href="https://example.com" onclick="ga('send', 'event', 'setupmodal', 'click', 'mac');">

Furtherly narrowing down the question: How can i add modify and/or add values to the modal’s <a> tag?

[Swift Ideas – Ed]

In that case, the best thing to do would be to override the modal function output, in a child theme’s functions.php file, here is the code: http://swiftideas.d.pr/6KVNG1/1j69aU2R

– Ed

[Prezne]

Hi, thanks for posting the code. It seems your Droplr account has exceeded the bandwidth transfer limit for the current period.

Could you post the code somewhere i can reach it? Thanks!

EDIT:

I found the code you posted initially in the notification email but it doesn’t seem to work with my child theme’s functions.php. When i paste it in there between an opening and closing PHP tag it just returns the famous blank screen in WordPress. (Yes, i removed the ‘ and ‘ that were included to render the code as code).

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Not sure what happened there, account is fine it just failed to upload, here it is – http://swiftideas.d.pr/N3DkL/22a4jJVj

Thanks,

– Ed

[Prezne]

Hi Ed, thanks for reposting. I just retried but the given code results in a blank screen in WordPress.

[Swift Ideas – Ed]

Hmm, where did you add it? Are you able to check the server error logs so that we can see the error it caused?

– Ed

[Prezne]

Hi Ed, i found these Dante theme related errors in the WordPress debug.log:

[09-Jun-2017 09:09:35 UTC] PHP Fatal error:  Cannot redeclare sf_modal() (previously declared in /path/to//public_html/wp-content/themes/dante-child/functions.php:19) in /path/to//public_html/wp-content/themes/dante/swift-framework/shortcodes.php on line 1018
[09-Jun-2017 09:09:47 UTC] PHP Parse error:  syntax error, unexpected '<' in /path/to//public_html/wp-content/themes/dante-child/functions.php on line 16
[09-Jun-2017 09:09:47 UTC] PHP Parse error:  syntax error, unexpected '<' in /path/to//public_html/wp-content/themes/dante-child/functions.php on line 16

[Swift Ideas – Ed]

Ahh, ok – you’ll need a change to the theme to allow you to override it. Please use this theme version: http://swiftideas.d.pr/g6QD7e/U5hMfo9M

and then another revision to the code that you paste into the child theme: http://swiftideas.d.pr/gqOej/4K8oL46H

That should be it!

– Ed