How to Monitor a specific HTML Element for changes

While monitoring specific HTML snippets for changes can be a little tricky or problematic (for a myriad of technical reasons we won't get into!), it certainly is possible with ChangeTower. This article will provide an overview of how to set up those Monitors, suggestions for how to test that you've set it up properly and that it will work as intended, and troubleshooting tips if it does not appear to be working.

Create a new Monitor using ChangeTower's Custom Multi-Criteria Monitor-type

We'll only be using one condition but this is the correct Monitor-type. You will then crawl your URL (this must be done one by one for each URL that you'd like to monitor) and click "Continue"

Creating a Custom Multi-Criteria Monitor on ChangeTower

Change the first dropdown from "Page Includes" to "Page does not include" and the Second Dropdown to "This exact HTML"

Setting up the monitoring criteria - ChangeTower

Enter the HTML Snippet you wish to Monitor for changes

This is of course the most important step and unfortunately the most complicated/problematic. In order for this to work, the entire HTML snippet must be included. This means that you need both the beginning open bracket and the closing bracket for the HTML code. In other words, everything in between <> and </>. If you do not, it will not work. Including partial/incomplete or open HTML snippets will break the Monitor.

Correct Examples:

<title>BBC - Homepage</title>

<title ng-bind="(pageMeta.title || 'The home of all things wedding') + ' | Zola'">The home of all things wedding | Zola</title>

Incorrect examples:

<title>BBC - Homepage
"(pageMeta.title || 'The home of all things wedding') + ' | Zola

Pro Tip: View the page source and copy the entire HTML element and paste it directly into your monitoring criteria

This is a really great way to reduce the chance of making a user error or entry mistake.

View the page source to extract the part of the HTML code that you need

Once you've entered your custom criteria (and yes you can add additional HTML snippets as SEPARATE conditions if you'd like for that same URL), you can then click continue and finalize the process:

Test your Monitor to Ensure that it's working properly.

ProTip: Test that it's working properly by editing the Monitor you just set up. You're going to temporarily change the dropdown from Page Does Not Include to Page Includes. Save your changes, click the Run Monitor Now button, and refresh the page after 15-30 seconds.

Edit monitor flow to confirm the monitors are working.

If a new notification appears (as it does in the above example), then you can be confident that you've set it up correctly. Because the system found the exact HTML properly in your test, it will be sure to detect if / when there are any changes to that snippet.

Be sure to go back and edit it back so that it's running with the Page Does Not Include condition!

If you control the site that you're testing, you can skip the above process and make the edit directly on the page to check that the system properly detects and logs the change.