# Implementation

### Implementation

This quickstart guides you through initializing the **Flagship SDK**, Getting flags and sending Hit.

### Import Flagship SDK

In order to use the SDK, you have to import the Flagship SDK bundle from this [CDN](https://unpkg.com/@flagship.io/js-sdk/dist/index.browser.js)

```html
<script src="https://unpkg.com/@flagship.io/js-sdk/dist/index.browser.js"><script>
```

### Initialization

The aim of this step is to give to the SDK all information necessaries which the Flagship SDK will use in order to fetch data from your [Flagship account](https://github.com/flagship-io/Gitbook/blob/main/SDKs/quickstart/app.flagship.io) and define the SDK running behaviors

```javascript
Flagship.start("yourEnvId", "yourApiKey");
```

You just need to call the static method **start** of **Flagship** class with parameters **envId** and **apiKey** from your [Flagship](https://app.flagship.io/) account. [Learn more](https://docs.abtasty.com/server-side/js-sdk/js-reference#start-method)

### Create a visitor

Once the SDK is initialized, the next step is to create a visitor. With this visitor instance, you'll be able to get all your available flags defined in [Flagship](https://app.flagship.io/), send hit, etc.

```javascript
const selectedZone = document.querySelector("#zone");

//when fetch property is unset or true, newVisitor will call synchronizeModifications automatically
const visitor = Flagship.newVisitor({
    hasConsented: true,
    context: {
        zone: selectedZone.value,
    },
});
```

This code will create a visitor with **context** the geographic zone where user is connected. We don't set **visitorId** property so, the SDK will generate one for us.\
**hasConsented** is set to true so that to track some user action. [learn more about consent](https://docs.abtasty.com/server-side/sdks/key-features/managing-visitor-consent)

Here the geographic zone comes from a list on the UI but you can get this information either by IP or by a third-party service.

In this step, you define all information about the user, which will be used in the targeting process.

### Get my flags

In order to get your flags defined in Flagship, you have to fetch Flags. The **fetchFlags** method will request Flagship and get all flags according to user targeting

```javascript
const loader = document.getElementById("loader");
const googleLogin = document.getElementById("google-btn");
const weChatLogin = document.getElementById("wechat-btn");

//listen visitor to be ready
visitor.on("ready", function (error) {
  if (error) {
    console.log("error", error);
  }

  // step 5 get flags
  const flagLoginWithGoogle = visitor.getFlag("login-with-google");
  const flagLoginWithWechat = visitor.getFlag("login-with-wechat");
  const flagLoginBtnColor = visitor.getFlag("login-btn-color");

  const loginOr = document.getElementById("login-or");

  //Hide or show google login according to flag login-with-google

  const isLoginWithGoogle = flagLoginWithGoogle.getValue(false); //by default calling the getValue method will automatically send an activation to the flagship
  if (isLoginWithGoogle) {
    googleLogin.classList.remove("d-none");
  } else {
    googleLogin.classList.add("d-none");
  }

  //Hide or show wechat login according to flag login-with-wechat
  const isLoginWithWechat = flagLoginWithWechat.getValue(false);
  if (isLoginWithWechat) {
    weChatLogin.classList.remove("d-none");
  } else {
    weChatLogin.classList.add("d-none");
  }

  if (!isLoginWithGoogle && !isLoginWithWechat) {
    loginOr.classList.add("d-none");
  } else {
    loginOr.classList.remove("d-none");
  }

  //Change login form button color according to the flag `login-btn-color`
  const loginBtnColor = flagLoginBtnColor.getValue("#0d6efd");
  const loginBtn = document.querySelector("form button");
  loginBtn.style.backgroundColor = loginBtnColor;
  loginBtn.style.borderColor = loginBtnColor;

  setTimeout(() => {
    loader.classList.add("d-none");
  }, 200);
});

visitor.fetchFlags() // fetch all Flags
```

Once the **fetchFlags** method process is done, the SDK will trigger the **"Ready"** event in the visitor instance to let know you that all your flags are ready to be used.

We call the **getFlag** method from the callback of the **"Ready"** event to get the 3 flags (**login-with-google**, **login-with-wechat** and **login-btn-color** ) defined in Flagship. Then, we activate each flag to report to Flagship that the current visitor has seen it.

Sometimes, the callback of the **Ready** event can have an error as a parameter if something wrong happened. [Learn more](https://docs.abtasty.com/server-side/js-sdk/js-reference#flagship-class)

### Send hits

The aim is to track some user actions in order to get reports about them

```javascript
const loginForm = document.getElementById("login-form");

//send hit
loginForm.addEventListener("submit", (e) => {
    e.preventDefault();
    visitor.sendHit({
        type: "EVENT",
        category: "Action Tracking",
        action: "submit-basic-login",
    });
});

//send hit
googleLogin.addEventListener("click", () => {
    visitor.sendHit({
        type: "EVENT",
        category: "Action Tracking",
        action: "click-google-login",
    });
});

//send hit
weChatLogin.addEventListener("click", () => {
    visitor.sendHit({
        type: "EVENT",
        category: "Action Tracking",
        action: "click-wechat-login",
    });
});
```

In this code, if a visitor has logged in with the login form, an **Event** hit with the action "submit-basic-login" will be sent to Flagship with "click-google-login" if the login process used is google and with "click-wechat-login" if wechat is used. [Learn more](https://docs.abtasty.com/server-side/sdks/js-sdk)

The visitor has to consent otherwise the SDK won't send hits.

### Github repos

[See repos Github](https://github.com/flagship-io/code-samples/tree/master/sdk/quickstart/js)