Tried to check if an image had changed on a webbpage but can´t make it work. It just says " 7:05 pm SELECTION_EMPTY"
How do i track to see if an image has been replaced or changed?
When monitoring a website for changes, by default Distill will only track changes to text content. If you need to monitor changes to images in a page, a better option is to use JavaScript selector. It gives you a very high degree of control over what needs to be monitored. Following example monitors changes to all images in the page:
JavaScript selector: $('img').each((x,i) => $(i).parent().append(i.src)).parent()
Config:
{
"includeStyle": true,
"ignoreEmptyText": true,
"dataAttr": "text",
"selections": [
{
"frames": [
{
"index": 0,
"excludes": [],
"includes": [
{
"type": "js",
"expr": "$('img').each((x,i) => $(i).parent().append(i.src)).parent()"
}
]
}
],
"dynamic": true,
"delay": 2
}
]
}
If you need to monitor both, text and images in the page, the config could be:
JavaScript selector: $('img').each((x,i) => $(i).parent().append(i.src)).parent()
Config:
{
"includeStyle": true,
"ignoreEmptyText": true,
"dataAttr": "text",
"selections": [
{
"frames": [
{
"index": 0,
"excludes": [],
"includes": [
{
"type": "css",
"expr": "html"
},
{
"type": "js",
"expr": "$('img').each((x,i) => $(i).parent().append(i.src)).parent()"
}
]
}
],
"dynamic": true,
"delay": 2
}
]
}
Note that in both examples, I have used a very generic selector that matches all images in the page and full HTML. This rarely what we need. These can be customized by changing img to a more specific image selector in that page. If you need help creating selectors for your page, please feel free to share the page URL and I can show who.
Cheers!
1 Like
Hi,
this looks what i have been looking for. is it right to copy your first config and past it by clicking show config area for monitoring images changed only?
thanks in advance
Hey @medianoh, that config will track changes to all img urls in the page. If you need to monitor a few specific images, the CSS selector for those image tags will have to be updated. If you need help, feel free to share the URL and a screenshot to highlight the region.
i copied the img javascript path and it still made the selection empty error, what am i doing wrong?
the js path is “document.querySelector(”#bottomleft > div > div.blockbody.formcontrols.settings_form_border > div > div:nth-child(1) > table > tbody > tr:nth-child(35) > td:nth-child(2) > img")"
Can you start by using the config in https://forums.distill.io/t/checking-if-an-image-has-changed/184/2? There you can update 'img' with your desired CSS selector.
Hello - I also need some help with this, and am running into the same issues as ajitk. Where exactly do we enter the Config code you mentioned? Here is the website I’m monitoring:
https://arcteryx.com/us/en/shop/beams-beta-jacket
Specifically, the “M” button under Size.
Hello @thomasec, this page has an easier solution that doesn’t require you to use JS. Following CSS selector can be used to only monitor the list of available sizes: [data-testid='size-list'] button:not(.no--stock)
Monitoring the product’s title will make the monitor work even when all the sizes are out of stock. Follwing CSS selector does that: #primary-info h1
Following config uses both of these selectors:
{
"includeStyle": true,
"selections": [
{
"frames": [
{
"index": 0,
"excludes": [],
"includes": [
{
"expr": "#primary-info h1",
"type": "css"
},
{
"expr": "[data-testid='size-list'] button:not(.no--stock)",
"type": "css"
}
]
}
],
"dynamic": true,
"delay": 2
}
],
"ignoreEmptyText": true,
"dataAttr": "text"
}
Cheers!
Hello @alvaro89glez, Distill now supports attribute and property selection. Please see https://distill.io/docs/web-monitor/what-is-visual-selector/#how-to-monitor-attribute-and-property-value-for-the-selected-element for more details on this.
You can try monitoring the map’s innerHTML to track changes to their color. Here is another user talking about this technique: Monitor ticket sales - Help and Support - Community Forum - Distill