How to track changes to anchor tag's href

Help and Support
1

Hi there, I’m trying to watch for changes to an href anchor tag on a page. Is there a way that this javascript page can be modified to track any changes to that?

The page in question is EMSB Elementary Registration

What I’d like to monitor is the red button and the href URL (currently #).
Reserve at East Hill on Jan. 24 as of 7 am

Thanks in advance!

2

Hello @rlancion, welcome of the community forum.

Like Checking if an image has changed - #2 by ajitk, a JS selector can be used to monitor changes to href.

A script for the page you linked is: a = $('.info-box > p:first-of-type a'); a.text(a.prop('href'))

It works by setting href as the text content of the monitored anchor tag. It used jQuery for brevity but could be done without using jQuery too.

The corresponding config is:

{
  "selections": [
    {
      "frames": [
        {
          "index": 0,
          "excludes": [],
          "includes": [
            {
              "type": "js",
              "expr": "a = $('.info-box > p:first-of-type a'); a.text(a.prop('href'))"
            }
          ]
        }
      ],
      "dynamic": true,
      "delay": 0
    }
  ],
  "ignoreEmptyText": true,
  "includeStyle": false,
  "dataAttr": "text"
}

Do give it a try and see if that works. Thanks for using Distill!

1 Like
3

Hi all, I need to monitor whether a button in a web page is updated with a new link (triggered when you click on it).

Example: a restaurant web page contains a “menu” button which opens a PDF upon clicking on it.
How can I monitor when the path to the PDF is updated to a new PDF?

Thanks!!

4

Is that an element with name button or a? It should be possible in the latter case but not in the former.

5

Hi, I am not sure what the difference is?..

The situation I am facing is on this website: https://ottovolante.nl/
There is a clickable link “Menu” that now points to “https://ottovolante.nl/wp-content/uploads/2022/07/MENU-a-la-carte.pdf”
And sometimes this link changes - that’s what I need an alert for.

Great if you can help? Thanks!

6

Hi @Treats, it’s an anchor tag, an element with name a. It can be monitored using the technique mentioned in one of the replies above. Following is a config that can be used for your website:

{
  "selections": [
    {
      "frames": [
        {
          "index": 0,
          "excludes": [],
          "includes": [
            {
              "type": "js",
              "expr": "a = $('[data-id=\\'0dade00\\'] a'); a.text(a.prop('href'))"
            }
          ]
        }
      ],
      "dynamic": true,
      "delay": 0
    }
  ],
  "ignoreEmptyText": true,
  "includeStyle": false,
  "dataAttr": "text"
}
7

Many thanks ajitk!
Since I am totally new to distill, would you also have some pointers on where and how to implement this? I have no clue… I guess there are somewhere past posts that explain how to do?

Thanks!

8

Checkout Config and Advanced Options | Distill.io. You can go to config of an existing monitor and replace the older config with the updated one shared above. Feel free to reach out in case you face any issue. Cheers!

9

Hi,
I took a few screen captures to show how you can use the Advanced Config shared by @ajitk.

  1. go to your website
    https://ottovolante.nl/
  2. use the distill extension and choose to monitor the page. you can choose to monitor the entire page.
  3. click on the dropdown next to the “open webpage selector” and choose “show config”
    image
    image806×646 53.3 KB
  4. delete what you see in the config

paste what @ajitk shared above as the config. ensure all opening and closing { } curly braces are included. the magic is in the “expr” line.
6) click save.
7) everything else is as usual in setting up the monitor. now the monitor will alert you when the menu link changes!

Let me know if that works?

1 Like
10

Here is a screenshot of the config after you’ve pasted in the new config.

image
image936×879 38.7 KB

11

Thank you both Harshal and ajitk!!!

1 Like
12

Hi,

Sorry for resurrecting a dead thread but I want to achieve exactly the same thing. I can follow the instructions but it’s just the code I need help with. I want to detect a change in the ‘Enrol Now’ button on this page:

https://thepacc.org.uk/classes-list/

I presume just this line changes?

“expr”: “a = $(‘[data-id=\‘0dade00\’] a’); a.text(a.prop(‘href’))”

Cheers!

13

Hello @bifter - we now support a much easier way to monitor and anchor tag’s href. Checkout the following article to learn more about how to montior an element’s attribute or property using the visual selector:

https://distill.io/docs/web-monitor/what-is-visual-selector/#how-to-monitor-attribute-and-property-value-for-the-selected-element

Is the “Enroll Now” element’s href expected to change and needs to be monitored?

1 Like
14

Exactly that, thanks for explaining!

1 Like