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
Propeller Head
 
Posts: 96
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: 5265
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
Propeller Head
 
Posts: 96
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: 5265
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: 38
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: 5265
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: 38
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: 38
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: 5265
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 4 guests