Adding Feedback widget to topics

This forum is for all Flare issues not related to any of the other categories.
Riverglow
Jr. Propeller Head
Posts: 7
Joined: Fri Mar 20, 2020 2:09 pm

Re: Adding Feedback widget to topics

Post by Riverglow »

Keith_Marion wrote:Dragging up an old topic because I can't seem to get it to work...

We're recording GA page hits, but of the life of me I can't get it to record events. What am I doing wrong?

Here is my masterpage:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="7" MadCap:lastHeight="604" MadCap:lastWidth="1215">
    <head>
        <script src="../Scripts/run_prettify.js">
        </script>
        <meta charset="utf-8" />
        <meta name="description" content="" />
        <meta name="author" content="" /><title></title>
        <link href="../Stylesheets/MainStyles.css" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
        <!-- Google Tag Manager (noscript) -->
        <noscript>
			<iframe async="" src="https://www.googletagmanager.com/ns.html?id=GTM-54TR2VJ" height="0" width="0" style="display:none;visibility:hidden"></iframe>
        </noscript>
        <!-- End Google Tag Manager (noscript) -->
        <!-- Start Google Script -->
        <script type="text/jscript" src="../Scripts/Google_TagManager.js">
        </script> <!-- End Google Script -->
		
		<!-- Start Feedback Script -->
		<script type="text/javascript" async="" src="../Scripts/google-analytics-events.js"></script> 
		<!-- End Feedback Script -->
		</head>
My feedback script:

Code: Select all

 <!-- Feedback Script -->
      
	$(document).ready(function(){
   
		/* -------------- Feedback -------------- */
		/* Yes click */
		$('.feedback-yes').click(function() {
				/* fade out question, fade in thankyou message */
				$('.feedback-question').fadeOut(function() {
						$('.feedback-reason.yes-thanks').fadeIn();
					});
               
				/* ga('send', 'event', 'Feedback - Yes', 'N/A', location.href); */
				gtag('event', 'N/A', {
					'event_category': 'Feedback - Yes',
					'event_label': location.href
					});

			});

		/* No click */
		$('.feedback-no').click(function() {
				/* fade out question, fade in thankyou message */
				$('.feedback-question').fadeOut(function() {
						$('.feedback-reason.no').fadeIn();
					});
			});
      
		/* No - response reasons */
		$('.feedback-reason .option').change(function() {
				/* if any options change, disable checkbox, record event, and fade in thankyou and email link */
				$(this).attr('disabled', true);
				if ($(this).is(':checked')) {
					/* get the label text of the reason (option) text that's selected */
					var reason = (this).attr('data-analytics-label');   
					/* ga('send', 'event', 'Feedback - No', reason, location.href); */
					gtag('event', reason, {
						'event_category': 'Feedback - No',
						'event_label': location.href
						});
				}
				$('.feedback-reason.no-thanks').fadeIn();
			});
      
	});

        <!-- End Feedback Script -->
And my Google Tag manager script:

Code: Select all

<!-- Google Tag Manager -->
       (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
			new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
			j=d.createElement(s),dl=l!='dataLayer'?'<'+l:'';j.async=true;j.src=
			'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
		})(window,document,'script','dataLayer','<actual_code>';

        <!-- End Google Tag Manager -->
Could this be because we are piggy-backing on top of a Marketing Google account, and not our own? What am I missing here?

https://docs.esignlive.com/content/a_es ... esle_6.htm
I know it's a long shot considering this was so long ago, but did you ever figure out how to use this script with google tag manager? We have the same setup and while the feedback buttons look lovely, the data doesn't actually seem to be going anywhere.

Also for others having trouble with "dead" buttons when publishing, I had the same issue when I linked the script to the masterpage. Worked fine locally but buttons were unresponsive on the live site. I ended up plonking the code directly inside the masterpage and now it seems fine. I'm not sure if that's a no-no, but it works.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding Feedback widget to topics

Post by NorthEast »

I've never used Google Tag Manager, but if you're adapting my example, then the parts you need to replace are where I send the event to Google Analytics.

For example, each event that I send to Google Analytics uses the gtag() function.

Code: Select all

gtag('event', reason, {
                  'event_category': 'Feedback - No',
                  'event_label': location.href
                  });
So you need to change those parts and replace them with however you would send an event to Google Tag Manager (assuming it supports events?).

I'd suggest just setting it up without my code to start with, and check that you can send data to GTM. Once you have got that working, then try and integrate it with my code.
Riverglow
Jr. Propeller Head
Posts: 7
Joined: Fri Mar 20, 2020 2:09 pm

Re: Adding Feedback widget to topics

Post by Riverglow »

Yeah, I'm using the gtag code (thank you for that, btw, it was incredibly helpful). I'm just not sure it sends data to GTM the same way since I'm not seeing any events (I tried both the ga code and the gtag one). When I googled how to send gtag events to GTM, it was WAY over my head so I was hoping there was a simple code change I needed to make, but I suspect that's not the case, haha. In reading their help site, it seems I need to create a trigger, but I'm not seeing that option in my account, so I probably need to find someone who knows what they're doing and has higher GTM privileges: https://support.google.com/tagmanager/a ... 9219?hl=en
Opticdisc
Jr. Propeller Head
Posts: 9
Joined: Fri Mar 19, 2021 10:24 pm

Re: Adding Feedback widget to topics

Post by Opticdisc »

joshua_cline wrote:I've added the HTML, javascript, and CSS from Dave's code, however, when I select Yes or No, nothing happens. What did I do wrong? Is there something else I need to add to make this work?

Thank you
joshua_cline wrote:Nevermind. I figured it out.
I'm bumping this because I have the same issue, but I can't figure out why the Yes or No links appear to be dead. The Analytics are being read, but the events aren't being recorded
Opticdisc
Jr. Propeller Head
Posts: 9
Joined: Fri Mar 19, 2021 10:24 pm

Re: Adding Feedback widget to topics

Post by Opticdisc »

Dave Lee wrote:Here's the code behind our feedback system.


HTML
This is in the master page.

Analytics
An event is sent to analytics which contains 3 bits of information:
(a) A category of "Feedback - Yes" or "Feedback - No".
(b) An action which describes one of the reasons selected when you click No, e.g. "Could not find" - the action text is set by the data-analytics-label in the HTML.
(c) The label is the page URL.
First, this is the greatest piece of code, thank you Dave Lee!
I'm using gtags, and I can see everything being recorded in real time, but I can't get the YES or NO section to register. When I look at the Debugger, when I select a REASON for the No, I get the following error in the debug console:

Code: Select all

Feedback.js:33 Uncaught TypeError: this.attr is not a function
    at HTMLInputElement.<anonymous> (Feedback.js:33:26)
    at HTMLInputElement.dispatch (jquery.min.js:4:43090)
    at HTMLInputElement.v.handle (jquery.min.js:4:41074)
The GTAG script is in the HEAD of the master page, The link to the feedback javascript is in the body of the page, so the GA script runs before the feedback script.
Is there anything I should be looking at to troubleshoot?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding Feedback widget to topics

Post by NorthEast »

Opticdisc wrote:I'm using gtags, and I can see everything being recorded in real time, but I can't get the YES or NO section to register. When I look at the Debugger, when I select a REASON for the No, I get the following error in the debug console:
Something sounds wrong with your JS code - so perhaps paste what you've got in Feedback.js here.

At a guess, did you paste the code into the Feedback.js file using MadCap's own text editor?
If so, then it's probably messed up the code, as MadCap's text editor has a bug where it strips out random $ characters from any code you paste (and may have other issues).
So never ever use MadCap's editor text to work with JS code - it mangles your code, and MadCap don't seem to be bothered about fixing it!

If that's happened, start again and use a text editor outside of Flare to copy'paste the JS code (notepad, notepad++, VS Code, whatever).
Opticdisc
Jr. Propeller Head
Posts: 9
Joined: Fri Mar 19, 2021 10:24 pm

Re: Adding Feedback widget to topics

Post by Opticdisc »

Dave Lee wrote:
Opticdisc wrote:I'm using gtags, and I can see everything being recorded in real time, but I can't get the YES or NO section to register. When I look at the Debugger, when I select a REASON for the No, I get the following error in the debug console:
Something sounds wrong with your JS code - so perhaps paste what you've got in Feedback.js here.

At a guess, did you paste the code into the Feedback.js file using MadCap's own text editor?
If so, then it's probably messed up the code, as MadCap's text editor has a bug where it strips out random $ characters from any code you paste (and may have other issues).
So never ever use MadCap's editor text to work with JS code - it mangles your code, and MadCap don't seem to be bothered about fixing it!

If that's happened, start again and use a text editor outside of Flare to copy'paste the JS code (notepad, notepad++, VS Code, whatever).
Hi
Here's my code from Flare for feedback.js

Code: Select all

$(document).ready(function(){
   
		/* -------------- Feedback -------------- */
		/* Yes click */
		$('.feedback-yes').click(function() {
				/* fade out question, fade in thankyou message */
				$('.feedback-question').fadeOut(function() {
						$('.feedback-reason.yes-thanks').fadeIn();
					});
               
				/* ga('send', 'event', 'Feedback - Yes', 'N/A', location.href); */
				gtag('event', 'N/A', {
					'event_category': 'Feedback - Yes',
					'event_label': location.href
					});

			});

		/* No click */
		$('.feedback-no').click(function() {
				/* fade out question, fade in thankyou message */
				$('.feedback-question').fadeOut(function() {
						$('.feedback-reason.no').fadeIn();
					});
			});
      
		/* No - response reasons */
		$('.feedback-reason .option').change(function() {
				/* if any options change, disable checkbox, record event, and fade in thankyou and email link */
				$(this).attr('disabled', true);
				if ($(this).is(':checked')) {
					/* get the label text of the reason (option) text that's selected */
					var reason = (this).attr('data-analytics-label');   
					/* ga('send', 'event', 'Feedback - No', reason, location.href); */
					gtag('event', reason, {
						'event_category': 'Feedback - No',
						'event_label': location.href
						});
				}
				$('.feedback-reason.no-thanks').fadeIn();
			});
      
	});
I used notepad++ for the code, but I'll try again.

Thanks for your help!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding Feedback widget to topics

Post by NorthEast »

Yep, if you check the code for the 'No' feedback, you'll notice a "$" has been removed before "(this)" - which is typical of what happens if you paste JS code in Flare's editor.

Code: Select all

var reason = (this).attr('data-analytics-label');
Opticdisc
Jr. Propeller Head
Posts: 9
Joined: Fri Mar 19, 2021 10:24 pm

Re: Adding Feedback widget to topics

Post by Opticdisc »

Dave Lee wrote:Yep, if you check the code for the 'No' feedback, you'll notice a "$" has been removed before "(this)" - which is typical of what happens if you paste JS code in Flare's editor.

Code: Select all

var reason = (this).attr('data-analytics-label');
Thanks! That was the issue!
Opticdisc
Jr. Propeller Head
Posts: 9
Joined: Fri Mar 19, 2021 10:24 pm

Re: Adding Feedback widget to topics

Post by Opticdisc »

So, Dave, your solution is great but I'm guessing it's for Universal Analytics, correct?

What changes would I have to make it work with Google Analytics 4? I read that GA4 doesn't use the Category, Action, Label format anymore. How would the script need to be changed to work with GA4?

Thanks!
I can probably use Universal Analytics, but no one knows when Google will pull it.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding Feedback widget to topics

Post by NorthEast »

I've really not looked at events much in GA4 yet, and probably won't for a while.
I know they're still captured using gtag, so maybe you just need to change some of the parameters around.

I'm currently capturing both Universal Analytics and GA4 at the same time (I've set up properties for both).
I can see feedback event data going to GA4 too, but haven't looked at what data is captured or how you report on it.
Opticdisc
Jr. Propeller Head
Posts: 9
Joined: Fri Mar 19, 2021 10:24 pm

Re: Adding Feedback widget to topics

Post by Opticdisc »

Dave Lee wrote:I've really not looked at events much in GA4 yet, and probably won't for a while.
I know they're still captured using gtag, so maybe you just need to change some of the parameters around.

I'm currently capturing both Universal Analytics and GA4 at the same time (I've set up properties for both).
I can see feedback event data going to GA4 too, but haven't looked at what data is captured or how you report on it.
I've just got word that Universal Analytics support is ending July next year.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding Feedback widget to topics

Post by NorthEast »

Opticdisc wrote:
Dave Lee wrote:I've really not looked at events much in GA4 yet, and probably won't for a while.
I know they're still captured using gtag, so maybe you just need to change some of the parameters around.

I'm currently capturing both Universal Analytics and GA4 at the same time (I've set up properties for both).
I can see feedback event data going to GA4 too, but haven't looked at what data is captured or how you report on it.
I've just got word that Universal Analytics support is ending July next year.
Yeah, Google say July 1 2023 - so it's definitely worth getting a plan in place now to move to GA4.
See: https://support.google.com/analytics/answer/11583528

I've set up my analytics properties with 'dual tagging' for both UA and GA4, so events are recorded by both.
See: https://support.google.com/analytics/answer/11091026

But I still need to figure out how reporting works in GA4, as I think I'll need 'custom dimensions' to properly report on events that I'm sending.
See: https://support.google.com/analytics/an ... c=11091421
Opticdisc
Jr. Propeller Head
Posts: 9
Joined: Fri Mar 19, 2021 10:24 pm

Re: Adding Feedback widget to topics

Post by Opticdisc »

Dave Lee wrote:
Opticdisc wrote:
Dave Lee wrote:I've really not looked at events much in GA4 yet, and probably won't for a while.
I know they're still captured using gtag, so maybe you just need to change some of the parameters around.

I'm currently capturing both Universal Analytics and GA4 at the same time (I've set up properties for both).
I can see feedback event data going to GA4 too, but haven't looked at what data is captured or how you report on it.
I've just got word that Universal Analytics support is ending July next year.
Yeah, Google say July 1 2023 - so it's definitely worth getting a plan in place now to move to GA4.
See: https://support.google.com/analytics/answer/11583528

I've set up my analytics properties with 'dual tagging' for both UA and GA4, so events are recorded by both.
See: https://support.google.com/analytics/answer/11091026

But I still need to figure out how reporting works in GA4, as I think I'll need 'custom dimensions' to properly report on events that I'm sending.
See: https://support.google.com/analytics/an ... c=11091421
I set up dual tagging because that made the most sense, but I'm having trouble wrapping my head around the custom dimensions.
Opticdisc
Jr. Propeller Head
Posts: 9
Joined: Fri Mar 19, 2021 10:24 pm

Re: Adding Feedback widget to topics

Post by Opticdisc »

Hi,
I'm bumping this because I'm still having a hard time trying to modify Dave Lee's solution (Which we've been using quite a bit) to GS4.. that and getting GA4 to show search results and search pages, which is also very valuable. Has anyone been successful, or is there another method everyone is using?

Thanks
Post Reply