# Tag Implementation

### Implementation

Log in to your AB Tasty account and [get your personal snippet](https://app2.abtasty.com/settings/installation-code/tag).

> Synchronous sample example

```javascript
<script type="text/javascript" 
        src="https://try.abtasty.com/3d09baddc21a365b7da5ae4d0aa5cb95.js">
</script>
```

> Asynchronous sample example

```javascript
<script> 
    (function (i, s, o, g, r, a, m) { 
    i["abtiming"] = 1 * new Date(); 
    a = s.createElement(o), 
    m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) 
    })(window, document, "script", "//try.abtasty.com/3d09baddc21a365b7da5ae4d0aa5cb95.js"); 
</script>
```

The hash in the snippet will be your AB Tasty account `identifier`.

#### Best practices

Our tool needs to be executed quickly as it is going to evaluate its environment (URL, device, datalayer, content of the webpage) to know if it has to execute and display a campaign, resulting in a potential layout shift.\
That's why we recommend to implement our tag as high as possible on your website using the synchronous version to avoid any flickering effect (displaying the original website before the variant).

Putting it in the BODY or forcing him to run asynchronously will higher your risks of having a flickering effect, damaging the user experience on your website.

### QA

#### Check from the network tab

The easiest way to QA your implementation is to have a look in the network tab of your browser. By filtering on the `try.abtasty.com` domain you should be seeing our tag being downloaded.

<figure><img src="/files/SnVYYlNcCEkghn295dgs" alt=""><figcaption><p>QA the tag using the network tab</p></figcaption></figure>

By opening its preview tab, you will have its last update time and its version.

<figure><img src="/files/iJH5W94xhEeIBAkrd8uk" alt=""><figcaption><p>Date and version using the preview tab</p></figcaption></figure>

#### Check for the JS object

When correctly executing, our tag creates an `ABTasty` JS object with useful variables and methods.

<figure><img src="/files/OpA1DQZGnKYoANFkEja2" alt=""><figcaption><p>JS Object in the browser console</p></figcaption></figure>

#### Check for the browser storage

If no storage restriction is set (consent management), the tag will automatically create cookies and entries in the local storage and session storage.

#### Check for the consent

At any moment, you can check if consent for data storage and data collection has been granted by the current visitor. The following variable must be equal to `true` when consent has been given.

```javascript
window.ABTasty.consentReady
```

### Browser compatibility matrix

Our tag is compiled using the following Babel rule:

`>0.5%, not ie 11, not op_mini all`

[Corresponding browsers list](https://browsersl.ist/#q=%3E0.5%25%2C+not+ie+11%2C+not+op_mini+all)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/client-side/tag/readme-1/tag-getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.