Syllabus Lesson 22 of 156 · Pixels, beacons, apps and the invisible web
Pixels, beacons, apps and the invisible web

Third-party scripts

Why it matters Most websites run code written by other companies. That code can watch everything you do on the page, including what you type. Knowing which kinds exist helps you spot them, and if you build sites, choose them with care.

Guests in the house

When a site adds someone else's script, it is like a homeowner giving a key to a contractor. The contractor can go into every room, not just the one they were hired for. A script added to a page can read and change everything on that page, just like the site's own code.

Third-party script: code a page loads from another company's server, such as https://cdn.adco.example/tag.js on shopa.example. It runs with the same power as the page's own code.

Three common kinds

Tag manager: one script that loads many others, chosen from an online dashboard. The site adds it once; marketing staff can then add new trackers without changing the site's code. Useful for them, but it means the list of scripts can change at any time.

Heatmap: a tool that records where visitors click, move and scroll, then paints a coloured map of the page showing the busy spots. Usually combined across many visitors.

Session replay: a tool that records what happens on the page during your visit, such as mouse moves, clicks, scrolling and changes to the page, so staff can watch it back like a video.

What session replay sees

Here is what a replay script might record during a short visit to the practice shop shopa.example. The data is made up:

00.0s  page loaded   /checkout
01.2s  mouse moved   to (412, 300)
02.8s  click         button "Apply voucher"
04.1s  typed         voucher field: "SPRING10"
06.5s  typed         email field: "*****************"
09.0s  scrolled      to 60% of page
11.3s  click         link "Delivery options"

Notice the masked email field. Good replay tools hide what you type in sensitive fields. But masking is a setting the site chooses, and it is easy to get wrong: a field the tool does not recognise as private may be recorded in full. Some tools also record text as you type, before you press Submit, so deleting a half-typed message does not unsend it.

The demo for this lesson will replay your own clicks on a practice page. It will keep the recording in the page's memory only, mask inputs, and forget everything when you leave.

Try it See the third-party scripts on any page. Open DevTools (F12, or Cmd+Option+I on a Mac), choose the Network tab, and reload the page. Click the Domain column header (right-click the column headers to add it if you do not see it) to sort requests by where they come from.

  • Requests to the site's own name are first party.
  • Everything else is third party. Type js in the filter box to see only scripts.
  • Count how many different companies a news or shopping site loads code from.

You are only looking: nothing changes and nothing is sent.

A common misconception

"Analytics only counts page views." Simple analytics might. But a third-party script is not limited to what it is advertised to do; it can read the whole page. What it actually collects depends on the tool and how the site set it up.

Recap

  • A third-party script runs with the same power as the site's own code.
  • Tag managers load other scripts, so the list can change without the site changing.
  • Heatmaps and session replay record clicks, scrolls and sometimes typing; masking depends on the site's settings.
  • The DevTools Network tab shows which companies a page loads code from.

Spotted a problem in this lesson? Report it

Code · runs in your browser
Output

        

      

      
      

        Back