# Frontend campaigns creation

Created: 29.03.2023

Updated: 28.11.2023

Author: Polina A.

{% hint style="info" %}
General description of campaign structure: [Campaigns structure](/lang/en/platform-interface/campaigns-structure.md)
{% endhint %}

## **Creating a Campaign**

To create a campaign, you need to go to the "Campaign" section and click on the "Create Campaign" button (1):

<figure><img src="/files/IztO8T2ZbgteF1Z1tNK0" alt=""><figcaption></figcaption></figure>

In the opened window, you will be able to choose:

1. The type of page on which the campaign should run.

<figure><img src="/files/97Xi3hrUqiMBp7N8GStk" alt=""><figcaption></figcaption></figure>

2. The type of campaign you want to configure.

<figure><img src="/files/D99eFpqL2F7NTe0Q6SKC" alt=""><figcaption></figcaption></figure>

3. The template for the campaign variation.

<figure><img src="/files/Cwty8fDVQ3BvVat1xAak" alt=""><figcaption></figcaption></figure>

> Different types of campaigns have different template options available.&#x20;
>
> &#x20;Templates can be of two types: pre-configured by the Gravity Field team or custom templates. Learn more about templates: [Working with Templates](/lang/en/platform-interface/working-with-templates.md)

## **Setting up a Campaign**

Upon selecting a template a new screen will be opened where you can configure your future campaign:

<figure><img src="/files/FGnfEPi9WgYjZLCzqyWP" alt=""><figcaption></figcaption></figure>

Here you have the ability to:

1. Rename the campaign;
2. Include a text comment about the campaign, which makes it easier for colleagues to understand its purpose, and include labels for visual categorization, such as by page type or creator, to enhance organizational clarity.&#x20;

<figure><img src="/files/8BjVtuySomkoRlAiZbtG" alt=""><figcaption></figcaption></figure>

3. Change the campaign status. The status could be Active, Draft, or Paused;
4. Choose the trigger type that will activate the campaign.&#x20;

{% hint style="info" %}
&#x20;The "Time on page" and "Event" triggers have additional fields to fill, specifically:&#x20;
{% endhint %}

<mark style="color:blue;">**Time on page for "Time on page" trigger:**</mark>

<figure><img src="/files/6gcWGAn5XrRAYLQA3PmW" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Name of the event that serves for "Event" trigger:**</mark>

<figure><img src="/files/476Xc0ppXDKxSmGXRpRc" alt=""><figcaption></figcaption></figure>

In the “Advanced” subsection, you can create a composite trigger with "AND" and "OR" operators, for example, "Time on page 15 seconds" OR "Exit intent." Additionally, in this subsection, you can set the element loading wait time, such as a CSS selector:

<figure><img src="/files/56wRbAeFBpVZFzImOFbk" alt=""><figcaption></figcaption></figure>

5. The frequency at which the campaign can be triggered:

&#x20;       a. Once per page view;

&#x20;       b. Once per session;

&#x20;       c. Once per day/week/month;

&#x20;       d. Once per user (cookie-based);

6. Cancel changes or save the campaign;
7. Edit, duplicate, or delete the experience in the campaign (see below);
8. Additional settings:

<div align="left"><figure><img src="/files/LELYxwi7VlD9vMvO5AvI" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
&#x20;The "Serve on every SPA event" toggle must be activated if the created campaign should work on Single Page Applications (SPA) pages. For SPA special API calls are applied. This setting will not affect other campaigns.
{% endhint %}

### **Working with Experiences**

<figure><img src="/files/YHfI7BzO72UKcPJl4fIJ" alt=""><figcaption></figcaption></figure>

On the experience creation screen, you can:

1. Set a name;
2. Go to the subsection for creating variations and changing the experience status;
3. Specify targeting conditions. More details: [Targeting conditions definition and their applicability.](/lang/en/general-information/targeting-conditions-definition-and-their-applicability.md)
   1. Time targeting: when configuring targeting conditions, you can additionally specify the time and/or day of the week required for the user to fall into targeting. Additional intormation can be found by the link: [Targeting conditions definition and their applicability](/lang/en/general-information/targeting-conditions-definition-and-their-applicability.md#when)
4. Save or cancel changes.

### Campaign planning

To set a specific time frame for the experience, click "Set Schedule" in the field of the relevant experience:

<figure><img src="/files/4sZPNrMGDZN2XdXiLdOv" alt=""><figcaption></figcaption></figure>

<div><figure><img src="/files/8XwHh3SxKs7xi3GFXhnI" alt=""><figcaption></figcaption></figure> <figure><img src="/files/L3zkVbj4ag1sikW5nHxV" alt=""><figcaption></figcaption></figure></div>

In the opened pop-up, you can choose the:

1. Start and end date of the experience;
2. Exact start and end time of the experience;
3. Timezone - either section's or user's.

When choosing the start and end dates for the experience, select the desired date in the displayed calendar.

### **Creating a Variation**

<figure><img src="/files/PqXV1UwbnJibadFF4x3W" alt=""><figcaption></figcaption></figure>

When navigating to the variations screen, you can:

1. Choose a method: A/B testing or dynamic allocation;

{% hint style="info" %}
Dynamic allocation is a mode in which the system automatically determines the percentage of users getting each of the variations. The variation that performs better in terms of the assigned primary metric is shown to a larger percentage of users. Unlike A/B testing, dynamic allocation aims to achieve maximum impact in the shortest time possible with a strong focus on optimization and speed.
{% endhint %}

2. Choose a primary metric:

<div align="left"><figure><img src="/files/r5f9X2OcUMMVbDsEy2EP" alt=""><figcaption></figcaption></figure></div>

3. Additional experience settings from the options: variation stickiness as well as start and end of the attribution window;

{% hint style="info" %}
Attribution window is the period during which all conversions and revenue will be attributed to the specific variation. For example, if the attribution window is 3 days, a user clicked on the first day and made a purchase on the second, this purchase will be attributed to the variation user was served with.
{% endhint %}

<div align="left"><figure><img src="/files/bMjJ8J2XKapdCgIjrHOp" alt=""><figcaption></figcaption></figure></div>

The frequency of choosing a variation for a user, or "Variation Stickiness," determines how long a variation should be "attached" to the user. Different stickiness options are available for different allocation methods:

* For A/B test allocation, you can choose **"Sticky for the session"** or **"Sticky for the user (multisession)"**, meaning the variation will be reselected at the beginning of each new session or will be attached to a specific user ID.

{% hint style="info" %}
When choosing "Sticky for the user (multisession)," the assignment of the variation to the user will be reapplied at the start of each new version of the experience, regardless.
{% endhint %}

* For Dynamic Allocation, the options are **"Sticky for the session"** or **"Not sticky"**, meaning the variation will be reselected at the beginning of each new session or on each campaign trigger.

4. Click "Add New Variation" button to create a variation either from scratch or by using existing [templates](/lang/en/platform-interface/working-with-templates.md)**;**
5. Configure the weight of the variation. For example, with two variations at 50% weight, they will be evenly shown to two halves of the audience;
6. Click the “pencil” to enter [**variation editing mode**](#editing-and-creating-variation-code);
7. Clicking the “three dots” reveals an additional menu allowing you to duplicate or delete the variation;
8. Cancel and Save Experience buttons allow you to undo or save changes.

### **Creating and Editing Variation Code**

In the variation editing interface, you can provide custom CSS or JS code for the purposes of the campaign. For example, if you want a button's color to change on hover:

<div align="left"><figure><img src="/files/gw8BhQSdkhxpbBCK45YZ" alt=""><figcaption></figcaption></figure></div>

You can also set the parameters as variables and use them within the campaign. Variables make it easier to configure campaigns and allow business users to customize campaigns without the need for developers, providing them the ability to replace text, images, colors, and other design element parameters directly from the platform interface. More details: [Working with Variables in Variations](/lang/en/platform-interface/working-with-variables-in-variations.md)

### **Changing Experience Status**

After making all necessary changes to the campaign as a whole, you can change the experience's status:

&#x20;Draft - campaign draft;

&#x20;Active - active campaign;&#x20;

Paused - campaign is paused.

<figure><img src="/files/SKgiq5LiluZtVbXkqrpE" alt=""><figcaption></figcaption></figure>

### **Campaign Preview**

Gravity Field offers a preview function. You can preview a specific variation right on the site. To access the preview mode, click on the "eye" icon (1) next to the variation you're interested in. You will also need to specify the URL of the specific page on your website (2) where this variation will be shown. For example, <mark style="color:red;">**`https://yoursite.com/product_1`**</mark>. Additionally, you can preview the variation taking into account the targeting conditions that were configured at the experience level by activating the corresponding checkbox (3).

<figure><img src="/files/AIcJo2hjLeuzDKogMlBW" alt=""><figcaption></figcaption></figure>


---

# 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://developer.gravityfield.ai/lang/en/platform-interface/frontend-campaigns-creation.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.