カスタムツールの作成

Tealiumツールを使用すると、現在のページでJavaScriptを実行し、ユーザーに表示するデータを収集することができます。これにより、複雑でエンリッチされたツールを作成することができます。

Tealiumツール拡張機能のカスタムツールエリアにアクセスするには：

1. ブラウザウィンドウの右上にあるTealiumアイコンをクリックします。
   Tealiumツールのダイアログが表示されます。
2. カスタムツールタブをクリックします。
3. + カスタムツールをクリックします。
   ここから初級、中級、上級のツールの例を見ることができます。また、カスタムツールを追加したり、削除したりすることもできます。
4. 既存のツールの詳細を表示するには、Example Toolsタブの任意のツールの隣にある詳細を表示をクリックします。
   

   

利用可能なカスタムツールの完全なリストについては、Tealium Toolsを参照してください。

ツールの動作方法

JSON構成オブジェクト

カスタムツールは、そのプロパティと機能を記述するJSON形式のオブジェクトとして表現されます。

以下の例は、シンプルなツールのJSON構成を示しています：

{
    "id" : "send_message_and_error",
    "title": "メッセージとエラー",
    "description": "このツールは、シンプルなメッセージとエラーアラートを送信する方法を示しています。",
    "icon_url" : "https://tools.tealiumiq.com/tools/logo.png",
    "scripts": {
        "message" : {
            "title": "メッセージを表示",
            "description": "下のボタンを押してメッセージアラートを表示します。",
            "button_label": "メッセージを表示してください！",
            "js": "tealiumTools.sendMessage('Hello!', 'This is a sample message!')"
        },
        "error" : {
            "title": "エラーを表示",
            "description": "下のボタンを押してエラーアラートを表示します。",
            "button_label": "エラーを表示してください！",
            "js": "tealiumTools.sendError('Error!', 'This is a sample error!')"
        }
    }
}

このJSONオブジェクトは、カスタムツールを共有するために使用されます。このオブジェクトは、Tealiumツールに貼り付けて拡張機能に追加します。

結果として表示されるツールは次のようになります：

説明には、ヘルプなどの外部ページへのリンクを含めることができます。これは、“help-link"クラスを持つspanを使用して行います。これらは通常のアンカー<a>リンクのようにスタイルが適用されますが、新しいタブを作成し、データ属性に配置したURLをロードします。

例：

"description" : "追加情報については、<span class=\"help-link\" data-url=\"http://example.com/help.html\">このリンク</span>をクリックしてください。"

JSONプロパティ

以下のJSONプロパティがカスタムツールを定義します：

スクリプトプロパティ

“scripts"プロパティには、ツール内で利用可能な各タブを定義する追加のオブジェクトが含まれています。‘script’オブジェクトは、ツールの上部近くに表示されるタブを生成し、それぞれに独自の説明、入力フィールド、アクションボタンがあります。

以下のJSONプロパティが"scripts"オブジェクトを定義します：

入力プロパティ

inputプロパティには、表示するフォームフィールドを定義する追加のオブジェクトが含まれています。inputオブジェクトは、その値がJavaScriptでtealiumTools.inputオブジェクトを使用して参照できるフォームフィールドを生成します。inputオブジェクトの各キーはフィールド名を定義します。

例：

"input" : {
    "first_name" : {
        "type" : "text",
        "placeholder" : "ここにあなたの名前を入力してください",
        "label" : "名前"
    },
    "opt_in" : {
        "type" : "checkbox",
        "label" : "ここにチェックを入れてオプトインしてください。"
    }
}

結果として表示されるフィールドは次のようになります：

以下のJSONプロパティが"input"オブジェクトを定義します：

JavaScript関数

Tealiumツールフレームワークは、ツールとウェブページ間の通信を行うためのユーティリティ関数を公開します。tealiumToolsという特別なJavaScriptオブジェクトをスクリプトで使用して、データをやり取りすることができます。

以下のメソッドが利用可能です：

Handlebarsテンプレート

Tealiumツールの表示コンポーネントは、HTMLテンプレート言語であるHandlebarsを使用します。

以下の例は、Universal Data Object（UDO）、utag.dataで見つかったキー/値のペアを表示するために使用できるテンプレートを示しています：

<h4>utag.dataで見つけたものをチェックしてみてください：</h4>
<ul>
    {{#each this}}
        <li>{{@key}} : {{this}}</li>
    {{/each}}
</ul>

tealiumTools.send('whatever!')で送信したものは、テンプレート内のキーワードthisとして利用できます。オブジェクトや配列を送信する場合、上記の例で使用されているような{{#each}}のようなブロックヘルパーを使用して値を反復処理できます。

ユーザーに文字列を表示するだけであれば、次の例のようなシンプルなものを使用できます：

<p>{{this}}</p>

これはデフォルトのテンプレートです。これだけで十分な場合は、テンプレートの定義を全くスキップすることができます。

追加情報

• 各スクリプトに対してテンプレートを定義することができます。また、トップレベルのテンプレートも定義できます。
• スクリプトテンプレートは、スクリプトを実行してtealiumTools.send()を介してデータを送信した後にのみ表示されます。
• そのスクリプトに特定のテンプレートを定義していない場合、スクリプトはデータを表示するためにトップレベルのテンプレートを使用するようにフォールバックします。
• カスタムCSSスタイリングは現時点ではインラインで行う必要があります（<p style="color:red;">）。TealiumツールはTwitterのBootstrapフレームワークを使用してスタイリングを行います。Bootstrapに詳しい場合は、利用可能なクラスを使用してスタイリングを行うことができます。

デモツール

以下のリンクのリストには、作成できるツールの例が含まれています。試してみてください！

Cookie Helperツール

Cookie Helperツールを使用すると、ページ上でクッキーの値を見つけて構成することができます。

http://tealium-tools.s3.amazonaws.com/tools/tool_cookieHelper.json

Mini Tealium Web Companionツール

Tealium Web Companionの簡易版です。ページ上でどのタグ、拡張機能、ロードルールが発火したかを確認できます。

http://tealium-tools.s3.amazonaws.com/tools/tool_miniTwc.json

Interactiveツール

このツールは、テンプレート内のボタンを現在のページの関数にバインドすることをテストします。データポイントをページからスクレイピングしたり、シンプルなタイマーを使用したりすることができます。

http://tealium-tools.s3.amazonaws.com/tools/tool_interactive.json