Get a buttons href attribute

Using JavaScript with Hype
1

Hi all, is there a hypeDocument.extension that gets the href attribute of a button?

I'm trying to trigger some JS on a button click that will send an event to Google Analytics, this is the code:

gtag('event', 'Click', {
'event_category': 'Link',
'event_label': 'https://google.com'
});

I want the event label to be the href attribute. But instead of hardcoding the url as above, I'd rather a dynamic extension get the URL of the button attribute being clicked. Is this possible?

Any help appreciated.

2

So, this isn't something Hype does natively. It should just a matter of adding JavaScript though. At first I thought you wanted to get the value of a link. That looks something like this...

document.getElementById("linky").href

...where "linky" is the ID of an element. However, it looks like you want to set the value of "event_label" dynamically. So, maybe this template will help...

https://photics.com/free-template-tuesday-11-tumult-hype-multilingual/

It shows how to change elements dynamically, based on which button was pressed. But in this case, you want to get a URL value. It's basically the same idea. The "event_label" could be set to a variable. That variable value could be the "URL".

Step #1 — Visitor clicks "Photics.TV" button.
Step #2 — Hype runs On Click event (Run JavaScript)
Step #3 — That JavaScript changes the variable based on the button that was pressed.
Step #4 — var clickedURL = "https://photics.tv"
Step #5 — Run Google Analytics code, but... "event_label" : clickedURL

This is theoretical, as I don't use Google Analytics, but it's sounds similar to the way Matomo does it... Event Tracking User Guide - Reports - Matomo Analytics

There are several ways about making this dynamic. In the "Multilingual" template, it just grabs predetermined values from an array. Here, it sounds like you want the event tracking to run whenever the visitor clicks a Hyperlink.

The problem you're having might be related to how Hype adds Hyperlinks to buttons. It's not a "href" value. It's done through JavaScript. That's why the "Multilingual" template might be useful. It works with the way Hype does things.

At the top of every custom JavaScript function in Hype, it puts this...

// element - DOMHTMLElement that triggered this function being called
// event - event that triggered this function being called

It can get the "element" that was clicked. If you give your elements unique ID names, then you can more easily work with the data associated with that element. That's how the "Multilingual" template works. One script can work with many buttons because it's dynamic.

If I wasn't using Hype, and I wanted to add event tracking to links, I'd simply add an event listener to every "a" tag in the document... or at least the "a" tags that I wanted tracked. There are ways to select elements with JavaScript. From there, just get the "href" whenever they're clicked.

If you need to learn about how to use Event Listeners and Query Selectors, I recently made a tutorial about it... https://youtu.be/5VY88Lk0k1c?t=461 ...but the main theme of the video is that sometimes it's just easier to code. I'm thinking this is one of those situations — you're trying to do something dynamic and you're trying to do something that Hype doesn't do by default.

3 Likes
3

Hi Photics,
Thank you! That really helped. Here's what I ended up doing. For every button link I wanted to track I...

  1. Added a title attribute with the value set to the url (didn't want to add a href for fear of conflicting with the existing href) using the info panel in the Hype UI.
  2. Added a run javascript on click with the following script:

var clickedURL = element.title; // Stores the title attribute in variable clickedURL
gtag('event', 'View', {
'event_category': 'Product',
'event_label': clickedURL + ' on ' + hypeDocument.currentSceneName()
});

Admittedly it's not completely dynamic as I need to set the title attribute on every button, but at least this way I use the one script and don't need to write custom scripts for every link/button.

Cheers,
Jason

3 Likes