Adding Feedback widget to topics

This forum is for all Flare issues not related to any of the other categories.

Re: Adding Feedback widget to topics

Postby AlexFox on Mon Mar 05, 2018 4:46 am

Dave Lee wrote:...


Hi Dave, I love this set-up and I've tried to implement something similar but I seem to get an error after clicking Yes or No;

Code: Select all
Running command: ga("send", "event", "Feedback - Yes", "N/A", "http://mypage.com")
Command ignored. Unknown target: undefined


I've completed all of the google analytic setup prerequisites and I'm using google analytic debugger so I can see it's functioning correctly in all other aspects..

Does your version of this still work? Has anyone else had a similar problem?

Thanks!
AlexFox
Sr. Propeller Head
 
Posts: 120
Joined: Thu Oct 19, 2017 1:56 am

Re: Adding Feedback widget to topics

Postby Dave Lee on Mon Mar 05, 2018 5:04 am

AlexFox wrote:
Dave Lee wrote:...


Hi Dave, I love this set-up and I've tried to implement something similar but I seem to get an error after clicking Yes or No;

Code: Select all
Running command: ga("send", "event", "Feedback - Yes", "N/A", "http://mypage.com")
Command ignored. Unknown target: undefined


I've completed all of the google analytic setup prerequisites and I'm using google analytic debugger so I can see it's functioning correctly in all other aspects..

Does your version of this still work? Has anyone else had a similar problem?

Thanks!


In around August 2017, Google changed the tracking code from the "ga" format to a new "gtag" format.

My example uses the older "ga" tracking code format. This is still supported by Google, so my original script still works - obviously only if you're using the "ga" format tracking code.

If you're just getting your GA tracking code now, it'll be provided in the new "gtag" format.
So if you're using "gtag", the script needs to send the event information using gtag() rather than ga().

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


The prerequisites for using either "ga" or "gtag" is that this analytics tracking code is run prior to my script.
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Adding Feedback widget to topics

Postby AlexFox on Mon Mar 05, 2018 6:24 am

Thanks for the super prompt reply Dave, I inspected the page you linked earlier in the thread and amended my ga event to use ga("gtag_UA_XXXXXXX_X.send" ... and this seems to work fine, in that I now actually have events appearing in my analytics!

Thanks again :)
AlexFox
Sr. Propeller Head
 
Posts: 120
Joined: Thu Oct 19, 2017 1:56 am

Re: Adding Feedback widget to topics

Postby Dave Lee on Mon Mar 05, 2018 7:03 am

AlexFox wrote:Thanks for the super prompt reply Dave, I inspected the page you linked earlier in the thread and amended my ga event to use ga("gtag_UA_XXXXXXX_X.send" ... and this seems to work fine, in that I now actually have events appearing in my analytics!

Thanks again :)


No problem, I just updated my own script from "ga" to "gtag" last week.

The "ga" method is still supported now, but it might not always be, so in the long-term you probably want to move to "gtag".
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Adding Feedback widget to topics

Postby bunnycat on Wed Mar 07, 2018 11:56 am

Thank you all, so much for this thread!

I was banging my head against why one of our Help systems posted events to GA, and one didn't. It was because one was under the old ga and the other was under gtag! My script was using ga when it should have used gtags.

EDIT: After updating my site with the gtag events as in the code snippets from Dave - it still isn't submitting anything to GA as events...
I've tried diagnosing using the GA debugger for Chrome, and I don't see any overt errors...
I've reviewed all of the material in the GA developers guide on Event tags but it doesn't seem like anything is incorrect. I'm giving up for tonight before my head explodes.
bunnycat
Propeller Head
 
Posts: 39
Joined: Tue Nov 03, 2015 6:44 am

Re: Adding Feedback widget to topics

Postby Dave Lee on Thu Mar 08, 2018 12:34 am

bunnycat wrote:Thank you all, so much for this thread!

I was banging my head against why one of our Help systems posted events to GA, and one didn't. It was because one was under the old ga and the other was under gtag! My script was using ga when it should have used gtags.

EDIT: After updating my site with the gtag events as in the code snippets from Dave - it still isn't submitting anything to GA as events...
I've tried diagnosing using the GA debugger for Chrome, and I don't see any overt errors...
I've reviewed all of the material in the GA developers guide on Event tags but it doesn't seem like anything is incorrect. I'm giving up for tonight before my head explodes.


The events code I posted works fine for me.

But before looking at events, make sure your gtag code is being run before the events, and that your gtag code actually works and is sending page views.

When you copy/past the gtag tracking code directly from Google, you have to edit part of it, so that it's valid XHTML.
In the first 'script' line, edit async to read async=""
Original:
Code: Select all
<script async src="https://www.googletagmanager.com/gtag/js?id=xx-xxxxxxxx-x">

Change to:
Code: Select all
<script async="" src="https://www.googletagmanager.com/gtag/js?id=xx-xxxxxxxx-x">
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Adding Feedback widget to topics

Postby bunnycat on Fri Mar 09, 2018 4:53 am

Dave Lee wrote:
bunnycat wrote:Thank you all, so much for this thread!

I was banging my head against why one of our Help systems posted events to GA, and one didn't. It was because one was under the old ga and the other was under gtag! My script was using ga when it should have used gtags.

EDIT: After updating my site with the gtag events as in the code snippets from Dave - it still isn't submitting anything to GA as events...
I've tried diagnosing using the GA debugger for Chrome, and I don't see any overt errors...
I've reviewed all of the material in the GA developers guide on Event tags but it doesn't seem like anything is incorrect. I'm giving up for tonight before my head explodes.


The events code I posted works fine for me.

But before looking at events, make sure your gtag code is being run before the events, and that your gtag code actually works and is sending page views.

When you copy/past the gtag tracking code directly from Google, you have to edit part of it, so that it's valid XHTML.
In the first 'script' line, edit async to read async=""
Original:
Code: Select all
<script async src="https://www.googletagmanager.com/gtag/js?id=xx-xxxxxxxx-x">

Change to:
Code: Select all
<script async="" src="https://www.googletagmanager.com/gtag/js?id=xx-xxxxxxxx-x">


Dave, thank you for the extra information. I really appreciate it. Yes my gtag code is being run before the events, and we can see page views for that help system, so that section must be working.

I knew about the async issue because Flare build complains about it, but I guess I added the wrong parameter to async. I will try your suggestions. Thank you very much.
bunnycat
Propeller Head
 
Posts: 39
Joined: Tue Nov 03, 2015 6:44 am

Re: Adding Feedback widget to topics

Postby Keith_Marion on Thu Apr 19, 2018 11:49 am

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'?'&lt;'+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_esignlive/overview_of_esle_6.htm
Keith_Marion
Jr. Propeller Head
 
Posts: 1
Joined: Fri Apr 13, 2018 10:37 am

Re: Adding Feedback widget to topics

Postby bunnycat on Wed Apr 25, 2018 6:05 am

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'?'&lt;'+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_esignlive/overview_of_esle_6.htm


I don't know if it helps much, but the Chrome Google Analytics Tag Assistant extension (debugger) shows an exception when clicking your feedback button:

Code: Select all
Uncaught ReferenceError: gtag is not defined
    at HTMLAnchorElement.<anonymous> (google-analytics-events.js:14)
    at HTMLAnchorElement.dispatch (jquery.min.js:8)
    at HTMLAnchorElement.r.handle (jquery.min.js:8)
(anonymous) @ google-analytics-events.js:14
dispatch @ jquery.min.js:8
r.handle @ jquery.min.js:8
bunnycat
Propeller Head
 
Posts: 39
Joined: Tue Nov 03, 2015 6:44 am

Re: Adding Feedback widget to topics

Postby Dave Lee on Wed Apr 25, 2018 7:04 am

Keith_Marion wrote:Could this be because we are piggy-backing on top of a Marketing Google account, and not our own? What am I missing here?


The examples here are for using the Google Analytics code - either using the older 'ga' or newer 'gtag' flavours.

Your code for Google Tag Manager appears to be different to what's provided by Google Analytics.
Sorry, but I've no idea how that works, I've only used Google Analytics code.
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Adding Feedback widget to topics

Postby davidgolden99 on Wed Nov 14, 2018 2:16 pm

I'm late to the party, but I've discovered -- as has been mentioned in other threads -- that Flare 2017 and later breaks JS. I tried to implement Dave's code, only to find that I have dead "Yes" and "No" links. Is there a workaround to get the script to execute? For the moment, I'm using the code snippets exactly as Dave posted them.
davidgolden99
Propeller Head
 
Posts: 29
Joined: Thu Apr 10, 2008 11:17 am

Re: Adding Feedback widget to topics

Postby Dave Lee on Thu Nov 15, 2018 1:22 am

davidgolden99 wrote:I'm late to the party, but I've discovered -- as has been mentioned in other threads -- that Flare 2017 and later breaks JS. I tried to implement Dave's code, only to find that I have dead "Yes" and "No" links. Is there a workaround to get the script to execute? For the moment, I'm using the code snippets exactly as Dave posted them.


Nope - Flare 2017 doesn't break the JS at all.
I use this code in my projects and it works fine in Flare 2017 and 2018.

The only change I've made to my own javascript is moving from Google Analytics "ga" code (in my original post) to "gtag" code (which I've described later in this thread).

Bear in mind that Google Analytics must be run before this script (and work).
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Adding Feedback widget to topics

Postby jsandora on Mon Dec 03, 2018 12:13 pm

General question about adding this feedback to topics:

Am I correct that this needs to be deployed to an actual server in order to test out the JS and Analytics portion of the setup?

I've added the necessary code everywhere (HTML to Masterpages, CSS to Stylesheet, and JS file to Project). I'm able to see the initial feedback question on my local machine when I build out the project. BUT, the buttons themselves don't do anything. Clicking No doesn't open the follow-up response options, and Yes doesn't show the Thank You message. Is that just because it's on my local machine?
Software Documentation Specialist (but really, Tech Writer)
jsandora
Propeller Head
 
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Adding Feedback widget to topics

Postby Dave Lee on Tue Dec 04, 2018 1:05 am

jsandora wrote:General question about adding this feedback to topics:

Am I correct that this needs to be deployed to an actual server in order to test out the JS and Analytics portion of the setup?

I've added the necessary code everywhere (HTML to Masterpages, CSS to Stylesheet, and JS file to Project). I'm able to see the initial feedback question on my local machine when I build out the project. BUT, the buttons themselves don't do anything. Clicking No doesn't open the follow-up response options, and Yes doesn't show the Thank You message. Is that just because it's on my local machine?


Clicking No should display the questions, whether or not you've set up analytics.

When you set up analytics, you specifed the website URL. Google Analytics will only collect data that originates from that URL/domain. So you'll only see your analytics being recorded once you've deployed it to your server and you test it from that server/domain.

My javascript for sending the events is different, depending on your version of Google Analytics code - ga or gtag. If you got your GA code before Aug 2017 (in the old ga format), then go to the GA site and get your current tracking code in gtag format, and use that instead. I posted an updated version of my events javascript in this thread that works with GA's gtag code.

My advice would be to set up analytics and get that working first - e.g. test it recording page views. Once you've got GA working, then add my code to record the events, and make sure it runs after GA's code.
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Previous

Return to Flare's General Discussion

Who is online

Users browsing this forum: No registered users and 9 guests