[Prezne]

No problem, thanks for all the help so far!

[Prezne]

Hello there,

That removed the error. I’ve added the code from the link you posted in the Theme Options > Custom CSS/JS:

<script>
  window['GoogleAnalyticsObject'] = 'ga';
  window['ga'] = window['ga'] || function() {
    (window['ga'].q = window['ga'].q || []).push(arguments)
  };
</script>

I’m still looking for a way to test if Event Tracking is actually working but i would understand if that is not within the scope of support. 🙂

[Prezne]

The HTML rendering is not the problem. All the modals are rendering correctly.

But when clicking the modal it should trigger a Google Analytics event. Instead of triggering the event it generates the Javascript error in the console:

ReferenceError: Can't find variable: ga

[Prezne]

This reply has been marked as private.

[Prezne]

I’ve just disabled every plugin and i still get the error in the Javascript Console. So it’s not a conflicting plugin.

[Prezne]

The above code seems to work, as in: it does output the correct HTML. But when i click the modals generated by the shortcode i get this error in the Javascript console: ReferenceError: Can't find variable: ga.

When i copy the HTML that was generated by the shortcode and i place it below the shortcode (see code example below) i don’t get the error. But that of course renders 2 modals instead of one.

[sf_modal header="Header text here" btn_colour="accent" btn_type="sf-icon-reveal" btn_size="standard" btn_icon="fa-unlock-alt" btn_text="Button text here"]
ENTER THE MODAL BODY HERE
[/sf_modal]

<a class="sf-button standard accent sf-icon-reveal" href="#modal-1" onclick="ga('send', 'event', 'modal', 'open', 'Button text here');" role="button" data-toggle="modal" data-wpel-link="internal"><i class="fa-unlock-alt"></i><span class="text">Button text here</span></a>

How can the Javascript error be fixed? FYI: Event tracking does work on normal links.

[Prezne]

That worked! I even managed to insert the Button Text variable into the code. That way it automatically sets the Button Text as Event Name.

Here’s the final code i’m using (with the Button Text variable coded in):

/* MODAL SHORTCODE
	================================================= */
	if ( !function_exists('sf_modal') ) {
		function sf_modal($atts, $content = null) {
			extract(shortcode_atts(array(
				"header" => '',
				"btn_type" => '',
				"btn_colour" => '',
				"btn_size" => '',
				"btn_icon" => '',
				"btn_text" => ''
			), $atts));
			
			global $sf_modalCount;
			
			if ($sf_modalCount >= 0) {
				$sf_modalCount++;
			} else {
				$sf_modalCount = 0;
			}
			
			$modal_output = "";
			
			$button_class = 'sf-button '.$btn_size.' '. $btn_colour .' '. $btn_type;
			
			if ($btn_type == "sf-icon-reveal" || $btn_type == "sf-icon-stroke") {
				$modal_output .= '<a class="'.$button_class.'" href="#modal-'.$sf_modalCount.'" onclick="ga(\'send\', \'event\', \'modal\', \'open\', \''. $btn_text .'\');" role="button" data-toggle="modal">';
				$modal_output .= '<i class="'.$btn_icon.'"></i>';
				$modal_output .= '<span class="text">'. $btn_text .'</span>';
				$modal_output .= '</a>';
			} else {
				$modal_output .= '<a class="'.$button_class.'" href="#modal-'.$sf_modalCount.'" role="button" data-toggle="modal"><span class="text">' . $btn_text . '</span></a>';
			}
			
			$modal_output .= '<div id="modal-'.$sf_modalCount.'" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="'.$header.'" aria-hidden="true">';
			$modal_output .= '<div class="modal-dialog">';
			$modal_output .= '<div class="modal-content">';
			$modal_output .= '<div class="modal-header">';
			$modal_output .= '<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="ss-delete"></i></button>';
			$modal_output .= '<h3 id="modal-label">'.$header.'</h3>';
			$modal_output .= '</div>';
			$modal_output .= '<div class="modal-body">'.do_shortcode($content).'</div>';
			$modal_output .= '</div>';
			$modal_output .= '</div>';
			$modal_output .= '</div>';
				
			return $modal_output;
		}
		add_shortcode('sf_modal', 'sf_modal');	
	}

[Prezne]

This reply has been marked as private.

[Prezne]

Thanks! This is going to look stupid but here it goes: I tried overriding the shortcode as you suggested but somehow i keep getting the following error in the debug.log:

[12-Jun-2017 08:43:46 UTC] PHP Parse error: syntax error, unexpected 'send' (T_STRING) ) in /path/to/public_html/wp-content/themes/dante-child/functions.php on line 45

This is the code i used:

/* MODAL SHORTCODE
	================================================= */
	if (!function_exists('sf_modal')) {
		function sf_modal($atts, $content = null) {
			extract(shortcode_atts(array(
				"header" => '',
				"btn_type" => '',
				"btn_colour" => '',
				"btn_size" => '',
				"btn_icon" => '',
				"btn_text" => ''
			), $atts));
			
			global $sf_modalCount;
			
			if ($sf_modalCount >= 0) {
				$sf_modalCount++;
			} else {
				$sf_modalCount = 0;
			}
			
			$modal_output = "";
			
			$button_class = 'sf-button '.$btn_size.' '. $btn_colour .' '. $btn_type;
			
			if ($btn_type == "sf-icon-reveal" || $btn_type == "sf-icon-stroke") {
				$modal_output .= '<a class="'.$button_class.'" href="#modal-'.$sf_modalCount.'" onclick="ga('send', 'event', 'testmodal', 'testclick', 'testbrowsername');" role="button" data-toggle="modal">';
				$modal_output .= '<i class="'.$btn_icon.'"></i>';
				$modal_output .= '<span class="text">'. $btn_text .'</span>';
				$modal_output .= '</a>';
			} else {
				$modal_output .= '<a class="'.$button_class.'" href="#modal-'.$sf_modalCount.'" role="button" data-toggle="modal"><span class="text">' . $btn_text . '</span></a>';
			}
			
			$modal_output .= '<div id="modal-'.$sf_modalCount.'" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="'.$header.'" aria-hidden="true">';
			$modal_output .= '<div class="modal-dialog">';
			$modal_output .= '<div class="modal-content">';
			$modal_output .= '<div class="modal-header">';
			$modal_output .= '<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="ss-delete"></i></button>';
			$modal_output .= '<h3 id="modal-label">'.$header.'</h3>';
			$modal_output .= '</div>';
			$modal_output .= '<div class="modal-body">'.do_shortcode($content).'</div>';
			$modal_output .= '</div>';
			$modal_output .= '</div>';
			$modal_output .= '</div>';
				
			return $modal_output;
		}
		add_shortcode('sf_modal', 'sf_modal');	
	}

[Prezne]

Just checking: If there is a theme update, will this continue to work? Or do i need to keep re-adjusting this version of the theme every time there is an update?

[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

[Prezne]

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

[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.

[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?

[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?