Self-hosting the tag

You might want to self-host our tag so it is downloaded from your own private CDN or directly injected by your backend into your website. However, there are functionnal rules to keep in mind when designing your solution. Follow these guidelines to successfully achieve the self-host of your AB Tasty tag.

Functionnal rules

An AB Tasty user can have a pretty intensive use of our tool. Each time they are modifying, playing or pausing or changing a setting, a new version of our tag is created to reflect the changes. They might want to have their changes to be pushed live as soon as possible, for example when they want to quickly correct an element on the website using AB Tasty or in the event a campaign is currently damaging the website.

By the way, with AB Tasty comes a "panic button" (see API reference). When pressing the button, our script is immediately flushed. This is super convenient to remove the AB Tasty engine without having to manually remove the tag. In our infrastructure, this action is pushed into production most of the time in less than 1 minute. When self-hosting, you will be in charge of this latency.

No matter the solution you'll chose, you have to keep in mind that you'll have to guarantee a minimum refresh rate to keep AB Tasty usable for the end-users. We suggest that 5 minutes should be the maximum latency, preferably less.

Tag's fragmentation

The AB Tasty tag is fragmented into multiple dynamic imports. This help us keeping its size as low as possible and make sure that a specific visitor only downloads code that is going to be useful for him.

When you are injecting our tag on your website, an initial script will be called which will then dynamically import additional dependencies. These dependencies have a relative path, so you will need to self-host them as well.

This fragmentation can evolves over time and depending on your usage of AB Tasty. Each time a user compile a new version of the script, we publish a manifest that you can grab to have the exact list of files to host.

Using manifest.json

The root of your account directory (one per AB Tasty account) is hosted at:

https://try.abtasty.com/{{yourIdentifier}}/

Every index file (the script tag you have to implement) is hosted directly at the root of our CDN, as stated in the manifest:

https://try.abtasty.com/{{yourIdentifier.js}}

Your identifier is a unique hash that can be find in your AB Tasty account settings or directly into the tag you've implemented. It is also the name of the index file.

In your account directory, you will find a file, manifest.json, which contains the list of dependencies for your account. You need to parse this file to get the list of all needed files to download.

{
  "727119.903476.json": "8f6d35889d03aa14015e158f92c8b236/827119.903476.json",
  "731348.908643.json": "8f6d35889d03aa14015e158f92c8b236/831348.908643.json",
  "736236.914721.json": "8f6d35889d03aa14015e158f92c8b236/836236.914721.json",
  "736238.914723.json": "8f6d35889d03aa14015e158f92c8b236/836238.914723.json",
  "738263.917196.json": "8f6d35889d03aa14015e158f92c8b236/838263.917196.json",
  "740954.920596.json": "8f6d35889d03aa14015e158f92c8b236/840954.920596.json",
  "741634.921500.json": "8f6d35889d03aa14015e158f92c8b236/841634.921500.json",
  "741810.921715.json": "8f6d35889d03aa14015e158f92c8b236/841810.921715.json",
  "741811.921716.json": "8f6d35889d03aa14015e158f92c8b236/841811.921716.json",
  "integrationName.json": "83cb13aabbfc8e879084f3a0bcdcb4f3/integrations/integrationName.json",
  "manifest.json": "8f6d35889d03aa14015e158f92c8b236/manifest.json",
  "index.js": "8f6d35889d03aa14015e158f92c8b237.js",
  "analytics.js": "shared/analytics.3d3c19a79e0b087986e9.js"
}

Structure	Shared among customers	Description
668512.828778.json	No	This is a campaign and its variation. Each variation of each campaign is downloaded asynchronously (unless it has been set otherwise in the tool).
integrationName.json	No	This is the list of all the segments coming from a third-party tools integration. The name of the file is dynamic according to the integration.
manifest.json	No	This file contains all the required files by the Tag.
index.js	No	This is the index file of your AB Tasty script. This is the file you need to call on your website.
initiator.js	No	(Next only) This is the cache management engine that handle the JavaScript cache created by AB Tasty.
analytics.js	Yes	This is the analytics engine that will automatically collect and send data to our servers. It is also used for your custom trackings.
jquery.js	Yes	This is our static version of the jQuery library. If you have configured AB Tasty to use our jQuery, this is the file that will be downloaded.
main.js	No	This is the main file containing all the account information, including campaigns.
me.js	Yes	This is the module in charge of the application of modifications made through the visual editor.
commons.js	Yes	This is the module containing all commons library used by our tag.
cross-domain-iframe.html	Yes	This is a small html file to make the cross-domain-iframe feature working. Please be sure to read our troubleshooting documentation.

:::caution This list isn't necessarily always up-to-date and not all these files might be needed nor even existing for your account. At all time, please refer to your personal manifest.json file. :::

Hosting the files

Get the manifest.json file and read the list of files to get for your account.

Then, grab all the needed files and put them together without changing the tree structure in your own server.

root
│   your-identifier.js
│
└───shared
│   │   analytics.hash.js
│   │   me.hash.js
│   │   commons.hash.js
│   
└───your-identifier
    │   main.hash.js
    │   campaignId.variationId.json
    │   campaignId-2.variationId-2.json
    │   campaignId-n.variationId-n.json
    │   manifest.json
    └───integrations
        │   integrationName.json

On your website, refer directly to the index file with the following JS tag (the tree before the index file serves as an example):

<script 
  type="text/javascript" 
  src="https://your-website.com/abtasty/8f83e47a06be564e44e72092b47cfa53.js">
</script>

The tag will then call all its needed resources directly from your servers if the tree structure is correct.

Serving the files

As the files are hosted and served by your servers and under your domain, you need to be sure that all of them could be downloaded by the browser and don't create Cross-Origin Resource Sharing issue.

To do so we are recommending you to add the different HTTP headers to the files as defined:

File Pattern	HTTP Header	Header value
*.json	Access-Control-Allow-Origin	*
*/initiator.js	Access-Control-Allow-Origin	*
cross-domain-iframe.html	Access-Control-Allow-Methods	GET
cross-domain-iframe.html	Access-Control-Allow-Origin	*
*.html	Content-Type	text/html
*.js	Content-Type	application/javascript; charset=utf-8
*.json	Content-Type	application/json; charset=utf-8

Those values are the ones used by AB Tasty native servers and are fully generic. If you need more security you can replace the * by the valid value that match your websites.

Caching policy

You can also manage the cache of all the files on our hands by using Cache-Control. Be careful you need to guarantee a minimum refresh rate for some of the files.

File Pattern	AB Tasty's value	Maximum recommended value	Server cache invalidation
*/manifest.json	s-maxage=86400,max-age=30	s-maxage=86400,max-age=300	At every file changes
????????????????????????????????.js	s-maxage=86400,max-age=30	s-maxage=86400,max-age=600	At every file changes
*/initiator.js	s-maxage=86400,max-age=30	s-maxage=86400,max-age=600	At every file changes
shared/*.js	s-maxage=31536000,max-age=31536000	s-maxage=31536000,max-age=31536000	No need
*/main.*.js	s-maxage=31536000,max-age=31536000	s-maxage=31536000,max-age=31536000	No need
*.json	s-maxage=604800,max-age=604800	s-maxage=604800,max-age=604800	No need
cross-domain-iframe.html	s-maxage=604800,max-age=3600	s-maxage=604800,max-age=43200	At every file changes
*.js	s-maxage=86400,max-age=30	s-maxage=604800,max-age=3600	No need