Install Abrantes

Abrantes.js

To start to learn and test Abrantes you can use the lightweight core and add the plugins you need as separate scripts. It's good to learn the tool and you don't need to use gulp.

Don't use it in production websites as it's less performant to load the plugins as separate files without being bundled and minified.

AbrantesPlus.min.js

Prebuilt bundle with the some plugins from the repo. However you should customize the plugin list with gulp for the best performance.

How to customize the build →

AbrantesPlusMod.min.js - ES6 module

Great if you just want to use Abrantes in few pages, without changing the site's template. You import Abrantes in a ES6 module and define the experiment in one html block.

There's a prebuilt module with the plugins I use that can be loaded directly from a CDN.

This version is also good for modern web apps using modules and bundlers.

As with the non-module version you should build your own version latter just with the plugins you need.

Open example →

Use AbrantesPlus.min.js

<script src="AbrantesPlus.min.js"></script>
<script>
  // Your experiment code here
</script>

Alternatively, load Abrantes from a CDN and it will update automatically. Use the latest stable version with <script src="https://cdn.jsdelivr.net/gh/osvik/abrantes@1.x.x/AbrantesPlus.min.js"></script>.

Use Abrantes.js

Load Abrantes first, then the plugins you need.

<script src="Abrantes.js"></script>
<script src="plugins/ga4-gtag.js"></script>
<script src="plugins/add2DL.js"></script>
<script>
  // Your experiment code here
</script>

You can also load Abrantes and the plugins from a CDN. For example, use <script src="https://cdn.jsdelivr.net/gh/osvik/abrantes@1.x.x/Abrantes.min.js"></script> to load the latest stable version of Abrantes.