How does Google Optimize AB testing work?

Specifically, how does it manage to serve different versions of the same site, with no access to the server or anything, just a script on the head?

The way all client-side testing platforms work is by applying the changes by executing JS on the top of the existing HTML of the page.

Basically, these platforms provide WYSIWYG editor that allows you to make the changes on any site. These changes can range from simple changes like color/text/layout to more complex changes where you can modify the HTML content of any element altogether.

Every change done via visual editor generates a corresponding JS code that will get executed on the fly when someone participates in one of the variants.

To summarize, the flow will be:

Inside the platform

1. Place the JS snippet of the platform on the site(should be inside the head tag to avoid any flickering).
2. Create the test and the variants in the platform using the visual editor or by writing your own code inside the code editor.
3. Run the test.

On the website

4. The user visits the site and the respective platform's JS snippet executes.
5. Snippet connects to the nearest CDN and brings back the test configuration along with the platform's library.
6. The library executes quickly and applies the changes to the respective elements by firing the JS snippet generated during the variant creation.
7. The library sends a hit to track the user along with variant info inside the platform reporting.
8. You will get the stats in real-time and will get to know which variant performed the best.