Context Attributes

Attributes are used to pass meta-data about the user and/or the request. They can be used later in the Web Console to create segments or audiences. They can be set using the attribute() or attributes() methods, before or after the context is ready.

One of the most useful and commonly used attributes, is the user_agent attribute which, when passed to the SDK, will be split up into multiple attributes that can be used to target specific browsers or devices in the Web Console. You can read more about how this works in the Segments section of the Dashboard Settings docs.

Javascript

context.attribute("user_agent", navigator.userAgent);

context.attributes({
  customer_time:
    user.created > new Date().getTime() - 24 * 60 * 60 * 1000
      ? "new_customer"
      : "returning_customer",
  user_type: user.isInternal ? "internal" : "normal",
  url: location.toString(),
  user_agent: navigator.userAgent,
  referrer: document.referrer,
  screenName,
  pageName,
  country: headers["HTTP_CF_IPCOUNTRY"],
  language: headers["Accept-Language"],
  channel: query_params.utm_medium,
});

Python3

    context.set_attribute("user_agent", req.get_header("User-Agent"))
    
    context.set_attributes({
            "customer_age": "new_customer"
    })

React

The context can be used directly to set attributes, like so:

context.attributes({
  customer_time:
    user.created > new Date().getTime() - 24 * 60 * 60 * 1000
      ? "new_customer"
      : "returning_customer",
  user_type: user.isInternal ? "internal" : "normal",
  url: location.toString(),
  user_agent: navigator.userAgent,
  referrer: document.referrer,
  screenName,
  pageName,
  country: headers["HTTP_CF_IPCOUNTRY"],
  language: headers["Accept-Language"],
  channel: query_params.utm_medium,
});

Or you can pass them as a prop to the Treatment or TreatmentFunction components.

<Treatment
  attributes={{
    customer_time:
      user.created > new Date().getTime() - 24 * 60 * 60 * 1000
        ? "new_customer"
        : "returning_customer",
    user_type: user.isInternal ? "internal" : "normal",
    url: location.toString(),
    user_agent: navigator.userAgent,
    // ... any other attributes you want to set
}}>
  <TreatmentVariant variant={0}>
    <h1>Variant 0</h1>
  </TreatmentVariant>
  <TreatmentVariant variant={1}>
    <h1>Variant 1</h1>
  </TreatmentVariant>
</Treatment>

note

The attribute() and attributes() methods can be called inside or outside of a useEffect.

Swift

context.setAttribute(name: "device", value: UIDevice.current.model)
context.setAttributes(["customer_age": "new_customer", "screen": "product"])

Vue2

Attributes can be set in script.

this.$absmartly.attribute("user_agent", navigator.userAgent);

this.$absmartly.attributes({
  customer_age: "new_customer",
});

Or directly in templates with the :attributes property of the Treatment component.

<treatment
  name="exp_test_experiment"
  :attributes="{ customer_age: 'returning' }"
>
  <template #default="{ config, treatment, ready }">
    <template v-if="ready">
      <my-button v-if="treatment == 0"></my-button>
      <my-button v-else-if="treatment == 1" :color="config.color"></my-button>
      <my-other-button
        v-else-if="treatment == 2"
        :color="config.color"
      ></my-other-button>
    </template>
    <template v-else><my-spinner></my-spinner></template>
  </template>
</treatment>

Vue3

Attributes can be set in script.

this.$absmartly.attribute("user_agent", navigator.userAgent);

this.$absmartly.attributes({
  customer_age: "new_customer",
});

Or directly in templates with the :attributes property of the Treatment component.

<treatment
  name="exp_test_experiment"
  :attributes="{ customer_age: 'returning' }"
>
  <template #default="{ config, treatment, ready }">
    <template v-if="ready">
      <my-button v-if="treatment == 0"></my-button>
      <my-button v-else-if="treatment == 1" :color="config.color"></my-button>
      <my-other-button
        v-else-if="treatment == 2"
        :color="config.color"
      ></my-other-button>
    </template>
    <template v-else><my-spinner></my-spinner></template>
  </template>
</treatment>

Java

context.setAttribute('user_agent', req.getHeader("User-Agent"));

context.setAttributes(Map.of(
    "customer_age", "new_customer"
));

Go

context.SetAttribute("user_agent", req.GetHeader("User-Agent"));

context.SetAttributes(map[string]string{
        "customer_age": "new_customer",
}

.NET

    context.SetAttribute('user_agent', Request.Headers["User-Agent"]);

    context.SetAttributes(new Dictionary<string, object>() {
        { "customer_age", "new_customer" }
    });

PHP

$context->setAttribute('session_id', \session_id());
$context->setAttributes(
    [
        'customer_age' => 'new_customer'
    ]
);

Ruby

context.set_attribute('session_id', session_id)
context.set_attributes(
    'customer_age' => 'new_customer'
)

Flutter/Dart

    context.setAttribute("attribute", 1);
    context.setAttributes(
      {
        "attribute": 1,
      },
    );

caution

You should create audiences with the same attributes as those in the Web Console. By default it will not enforce these conditions, but if for some reason the treatment() method is called for a user that doesn’t meet the correct criteria, the Web Console will warn you about it.