How to Assign Anchor Text as a Variable and Pass it to Google Analytics via gtag Event

Question

I am attempting to send a gtag event with a variable as an argument. I know that the function fires, and I can see it in GA, but the problem is the $anchorText variable being passed. I am trying to capture the anchor text of the link that was clicked, then pass that variable to the gtag function.

I am quite new to javascript and jquery... learning as I go. The environment I am working with is a WordPress site theme built with bootstrap. Referring to the documentation, I am attempting to send a GA event when a site visitor clicks one of the accordion widgets. Bootstrap automatically sends a show.bs.collapse event when one of the options is clicked, I am just trying to capture the text of that link and pass it to the gtag function.

For reference, the theme's demo site has the HTML structure, if needed.

<script>
jQuery(function($){
     var $anchorText = $('.panel-title a').click(function(){$(this).text()});
     $('.panel-group').on('show.bs.collapse',function(){
          gtag('event', 'Clicked', {'event_category':'Interactions', 'event_label':'Accordion: ' + $anchorText})
      });
});
</script>

Right now, the 'Event Label' in GA displays: Accordion: [object Object]. I am expecting to see Accordion: FAQ Example Question and so on, depending on the link that was clicked.

I'm going by what I can find online, but I believe the way I am assigning the anchor text/value to the variable is where my goof is. Any help or direction on what I can do to fix this is appreciated.

@Beneris, I didn't realize I got a response so quick. Thank you for that. That said, the answer you provided did not work. Please reference my comments in your answer. — user27636, May 15 '19 at 20:42

Beneris · Accepted Answer · 2019-05-30T11:41:59.377

0

<script>
jQuery(function($){
    jQuery('.panel-title a').on('click', function(e){
        var anchorText = jQuery(this).text();
        gtag('event', 'Clicked', {'event_category':'Interactions', 'event_label':'Accordion: ' + $anchorText})
    });
});
</script>

edited May 30 '19 at 11:41

answered May 15 '19 at 11:14

Beneris

627
4
11

1

Please take few minutes to add an explanation to you answer – DaFois May 15 '19 at 11:57
@Beneris, Unfortunately your code snippit does not work. Using this, GA does not receive these events at all. I believe the event that was firing, was the `show.bs.collapse` which was triggering the gtag function. Any other ideas? Thank you for your contribution though. – user27636 May 15 '19 at 20:46
@Beneris, the jQuery code you reference in the image, is slightly different then the one you provided as the answer, but I managed to get it working as intended. After some troubleshooting, I changed the following line `jQuery('.panel-title a').on('click', function(){`. I maybe wrong, but It appears the `$` variable was the issue and calling it incorrectly. Others suggested using the [noConflict function](https://stackoverflow.com/questions/7882374/how-do-i-implement-jquery-noconflict), but I changed it to `jQuery` instead. I'm still learning :), but thank you for your help. – user27636 May 28 '19 at 05:22

How to Assign Anchor Text as a Variable and Pass it to Google Analytics via gtag Event

1 Answers1