Google Analytics onclick event tracking on modals – Page 2

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

Tagged: Dante, javascript error, modals

This topic has 33 replies, 4 voices, and was last updated 6 years by Rui Guerreiro – SUPPORT.

Viewing 15 posts - 16 through 30 (of 34 total)

← 1 2 3 →

Back to forum

Posted in: Dante

June 9, 2017 at 11:45 am #327823

Prezne

Member

Post count: 21

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?

June 9, 2017 at 1:41 pm #327853

Swift Ideas – Ed

Keymaster

Post count: 15264

@Prezne – that change will be included in the next release, so you won’t need to make any adjustments after each update.

– Ed

June 12, 2017 at 9:50 am #328046

Prezne

Member

Post count: 21

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');	
	}

June 13, 2017 at 6:13 pm #328511

David Martin – Support

Moderator

Post count: 20834

Could you add your FTP details so we can take a closer look?

June 14, 2017 at 8:24 am #328579

Prezne

Member

Post count: 21

This reply has been marked as private.

June 15, 2017 at 6:00 pm #328940

Swift Ideas – Ed

Keymaster

Post count: 15264

You need to escape the single quotes in that line, like so:

/* 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');	
	}

– Ed

June 21, 2017 at 12:02 pm #329584

Prezne

Member

Post count: 21

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');	
	}

June 21, 2017 at 12:16 pm #329588

Rui Guerreiro – SUPPORT

Keymaster

Post count: 25779

Nice. Glad it’s sorted.

-Rui

June 22, 2017 at 10:01 am #329700

Prezne

Member

Post count: 21

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.

June 22, 2017 at 10:10 am #329702

Prezne

Member

Post count: 21

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

June 22, 2017 at 12:24 pm #329718

Rui Guerreiro – SUPPORT

Keymaster

Post count: 25779

What’s the link to that page so we can have a look?

-Rui

June 22, 2017 at 1:44 pm #329725

Prezne

Member

Post count: 21

This reply has been marked as private.

June 22, 2017 at 3:54 pm #329739

Rui Guerreiro – SUPPORT

Keymaster

Post count: 25779

This reply has been marked as private.

June 23, 2017 at 8:56 am #329822

Prezne

Member

Post count: 21

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

June 23, 2017 at 11:33 am #329839

Rui Guerreiro – SUPPORT

Keymaster

Post count: 25779

Hi,

Can you try the solution in the last reply of this Stackoverflow page?
https://stackoverflow.com/questions/42710456/uncaught-referenceerror-ga-is-not-defined-with-garequire-ec

Add that code to the custom js option in the general options.

-Rui

Back to forum

Posted in: Dante

Viewing 15 posts - 16 through 30 (of 34 total)

← 1 2 3 →

You must be logged in to reply to this topic.

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

Support Request

Support Policy

Privacy Policy