イベントとビジターの関数V2

既存のイベントとビジターの関数は、非推奨となっているV2ランタイムを使用しています。新しい関数はデフォルトでV3ランタイムを使用します。V3ランタイムを使用する関数とV2関数をV3に変換する方法については、イベントとビジターの関数V3とV2関数をV3ランタイムに移行するを参照してください。

名前付きエクスポート

Tealiumモジュールは、イベントとビジターの関数に対してauth、event、visitor、store、tealiumの5つの名前付きエクスポートを提供します。関数は次のようにこれらの名前付きエクスポートをインポートします。

import { auth, visitor, event, store, tealium } from "tealium"; 

イベントオブジェクト

eventオブジェクトは、関数がイベントフィードによってトリガされたときに利用可能であり、イベントデータを含んでいます。

イベントオブジェクトの例

以下は、イベントオブジェクトデータの例です。

{
  "account": "your-account",
  "profile": "main",
  "event_id": "run-test-event-id",
  "visitor_id": "run-test-visitor-id",
  "data": {
    "dom": {
      "viewport_height": 766,
      "referrer": "",
      "viewport_width": 1440,
      "domain": "www.example.com",
      "title": "Home Page",
      "query_string": "q=help",
      "hash": "",
      "url": "https://www.example.com/?q=help",
      "pathname": "/"
    },
    "udo": {
      "tealium_event": "page_view",
      "ut.account": "your-account",
      "ut.visitor_id": "0176cb4f3482110a5ba4702e147b0006d005a065104f2",
      "page_name": "Home Page",
      "ut.event": "view",
      "search_keyword": "help",
      "ut.domain": "example.com",
      "tealium_profile": "main",
      "ut.version": "ut4.46.202006020705",
      "tealium_session_id": "1609910608323",
      "tealium_account": "your-account",
      "ut.profile": "main",
    },
    "firstparty_tealium_cookies": {
      "utag_main__sn": "12",
      "utag_main_dc_visit": "12",
      "utag_main_ses_id": "1609910610822",
      "utag_main_dc_region": "us-east-1",
      "utag_main__st": "1609913306118",
      "utag_main_v_id": "0176cb4f3482110a5ba4702e147b0006d005a065104f2",
      "utag_main__se": "66",
      "utag_main__ss": "0",
      "utag_main_dc_event": "60",
      "utag_main__pn": "5"
    }
  },
  "env": "prod",
  "post_time": 1537305808000
}

イベントデータは、次のように関数内でアクセスできます。

const data = {};
    // DOM変数はevent.domに格納されます
    data.current_url = event?.dom?.url;
    // 標準のUDOイベント変数はevent.data.udoに格納されます
    data.session_id = event?.data?.udo?.tealium_session_id;
    // ファーストパーティのクッキーはevent.firstparty_tealium_cookiesに格納されます
    data.trace_id = event?.firstparty_tealium_cookies?.trace_id;
    // メタ変数はevent.metaに格納されます
    data.meta_description = event?.meta?.description;
    data.tealium_event = event?.data?.udo?.tealium_event;
    data.tealium_account = event?.data?.udo?.tealium_account;
    data.tealium_profile = event?.data?.udo?.tealium_profile;

ビジターオブジェクト

visitorオブジェクトは、関数がオーディエンスフィードによってトリガされたときに利用可能であり、ビジターデータを含んでいます。

ビジターオブジェクトの例

以下は、ビジターオブジェクトデータの例です。

{
  "metrics": {
    "Metric 1": 1,
    "Metric 2": 2
  },
  "dates": {
    "Date 1": 1603373790000,
    "Date 2": 1603373522000,
  },
  "properties": {
    "profile": "username",
    "visitor_id": "017560818b67001bc185a07f1cd703078003405000b7e",
    "account": "user-account",
  },
  "audiences": [
    "Audience 1",
    "Audience 2"
  ],
  "badges": [
    "Badge 1",
    "Badge 2"
  ],
  "creation_ts": 1603373522000,
  "current_visit": {
    "metrics": {
      "Metric 1": 1.3,
      "Metric 2": 6,
    },
    "dates": {
      "Date 1": 1603373868000,
      "Date 2": 1603373790000,
    },
    "properties": {
      "Property 1": "Chrome",
      "Property 2": "https://URL-for-website ",
    },
    "flags": {
      "Flag 1": true,
      "Flag 2": false
    },
    "property_sets": {
      "Property Set 1": [
        "Mac desktop"
      ],
      "Property Set 2": [
        "Chrome"
      ]
    },
    "creation_ts": 1603373790000,
    "total_event_count": 2,
    "events_compressed": false
  },
  "audiences_joined_at": {
    "Audience 1": 1603363523014,
    "Audience 2": 1603363523014
  }
}

Authオブジェクト: auth.get()

関数は、FacebookやGoogleなどの一部のサービスプロバイダにアクセスするために認証が必要です。詳細については、関数に認証を追加するを参照してください。認証を追加すると、アクセストークンが返されます。

auth.get()メソッドは、認証トークンの一意の自動生成IDを含む文字列を返します。関数がこのトークンIDを使用してHTTPリクエストを行うと、リクエストが送信される前に自動的にトークンに置き換えられます。

以下の例は、auth.get()を使用してトークンIDを取得する方法を示しています。

console.log(auth.get("TEST_AUTH"));

Tealiumオブジェクト: sendCollectEvent()

sendCollectEvent()メソッドは、イベントをTealium Collect HTTP APIに送信し、文字列を返します。

Tealium Collect HTTP APIのResponseインターフェースは、リクエストへの応答を表します。Responseモデルはfetch APIと同じですが、URLはコレクトクライアントの結果には含まれません。

Tealium Collectにイベントを送信する

以下の例は、Tealium Collect HTTP APIにイベントを送信する方法を示しています。

import {event, tealium} from 'tealium';

var newEvent = {‘key’: ‘value’};

tealium.sendCollectEvent(newEvent, 'newAccount', 'newProfile', 'datasourceId')
    .then(response => {
        if (!response.ok) {
            throw new Error(`Network response was not ok. Status code: ${response.status}.`);
        }

        console.log('Status code:', response.status);
        return response.text();
    })
    .then(data => console.log('Result:', data))
    .catch(error => console.error('Error:', error.message));

Storeオブジェクト: store.get()

storeオブジェクトには、グローバル変数として指定されるキー/値のペアが含まれており、複数の関数で使用できる変数や定数を指定します。グローバル変数は、関数のコードエディタのCodeタブから追加、編集、削除することができます。関数はグローバル変数の値を取得することができますが、変更することはできません。

関数は、store.get()メソッドを呼び出してキーの値を取得することができます。グローバル変数の追加と編集の詳細については、グローバル変数の管理を参照してください。

たとえば、キーがdateという名前のグローバル変数を作成した場合、関数は次のようにしてdateの値を取得します。

store.get('date')

属性IDによる属性名または属性値の取得

属性名は変更される可能性があり、コードが属性名を参照している場合に問題が発生することがあります。属性名の変更による問題を回避するために、属性をIDで参照することができます。イベントオブジェクトとビジターオブジェクトには、属性のIDに基づいて属性名を取得するためにgetAttributeNameById()メソッドを使用することができます。また、getAttributeValueById()メソッドを使用して属性の値を取得することもできます。以下の例は、これがどのように機能するかを示しています。

コードエディタに次のように入力すると、開き括弧を入力すると、属性と関連するIDのリストが表示されます:

リストをフィルタリングするために属性名の一部を入力することもできます。属性を選択すると、そのIDが括弧の後にコードに追加されます。属性のリストは、getAttributeValueById()でも同様に機能します。

fetch() APIを使用してHTTPリクエストを行う

関数は、以下の例に示すようにfetch APIを使用してHTTPリクエストを行うことができます。詳細については、Fetchを参照してください。

fetch('https://restcountries.eu/rest/v2/name/usa')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Network response was not ok. Status code: ${response.status}.`);
    }
    return response.json();
  })
  .then(data => console.log('Capital:', data[0].capital))
  .catch(error => console.log('Error:', error.message));

以下の例は、ネットワークからリソースを取得し、応答が利用可能になったときに解決されるプロミスを返す方法を示しています。

const fetchResponsePromise = fetch(resource [, init])

Fetch APIのRequestインターフェースは、リソースリクエストを表し、次のように定義されています。

const myRequest = new Request(input[, init]);

関数は、Fetch APIのHeadersインターフェースを使用してHTTPリクエストとレスポンスのヘッダーに対してさまざまな操作を実行することができます。Headers()は次のように定義されています。

const myHeaders = new Headers(init);

Fetch APIのResponseインターフェースは、リクエストへの応答を表し、次のように定義されています。

const myResponse = new Response(body, init);

次のブラウザ固有の機能はサポートされていません。

• キャッシュ
• 認証情報
• リファラ
• リファラポリシー
• シグナル
• keepalive
• リダイレクト
• モード

URLSearchParamsメソッドを使用してURLクエリ文字列を構築する

URLSearchParamsインターフェースは、URLのクエリ文字列を操作するためのユーティリティメソッドを定義します。この例では、URLSearchParamsを使用してURLのクエリ文字列を構築する方法を示しています。

function jsonToURLSearchParams(data) {    const params = new URLSearchParams();    buildURLSearchParams(params, data);    return params;}function buildURLSearchParams(params, data, parentKey) {
    if (data && typeof data === 'object' && !(data instanceof Date)) {
        Object.keys(data).forEach(key => {
            buildURLSearchParams(params, data[key], parentKey ? `${parentKey}[${key}]` : key);
        });
    } else {
        const value = data == null ? '' : data;

        params.append(parentKey, value);
    }
}