JavaScriptコードの拡張機能

前提条件

• utag v4.38以降。utag.jsテンプレートの更新に関する詳細は、当社のナレッジベース記事utag.jsの最新バージョンへのアップデートのベストプラクティスを参照してください。
• この拡張機能を公開するには、JavaScript Draft Promotionプロファイルレベルの権限が必要です。

動作方法

JavaScriptコード拡張機能には、ドラフトと公開キューを使用した独自の公開ワークフローがあります。ドラフトは、プロファイルを保存するときに保存されるが、デフォルトでは公開ファイルには含まれないコードの途中バージョンです。公開キューを使用してドラフトを公開すると、ドラフトは読み取り専用になり、次の公開時に対応する環境に含まれます。

Advanced JavaScript Code拡張機能の公開ワークフローにより、コードが準備できるまで公開されないようになります。また、どのコードが各環境に公開されているかを確認し、ドラフトと環境間のコードを簡単に比較することもできます。

GitHubとJavaScriptコード拡張機能を使用する方法については、GitHubとの同期を参照してください。

ドラフト

公開プロファイルに影響を与えずにコードの異なるバージョンを維持するためにドラフトを使用します。ドラフトは、特定の環境に対して公開キューに明示的に追加される場合にのみ公開されます。

ドラフトは、JavaScriptコードの名前付きバージョンです。各拡張機能のインスタンスには最大20のドラフトがあります。ドラフトはプロファイルが保存されるたびに保存されますが、特定の環境の公開キューに明示的に追加される場合にのみ公開されます。これにより、コードを編集し、進行中の進捗状況を保存できます（不完全な場合でも）、公開環境に影響を与えることなく作業を続けることができます。

公開ワークフロー

JavaScriptコード拡張機能には、コードの公開方法を提供する独自の公開ワークフローがあります。ドラフトはデフォルトでは公開されません。ドラフトを公開するには、次の公開に含めるために公開キューに追加する必要があります。

JavaScript Draft Promotion permissionを持っている必要があります。公開キューにドラフトを追加するためには。

以下のワークフローに従ってください。

1. 新しいドラフトを追加し、カスタムのJavaScriptコードを書きます。プロファイルとドラフト内のコードは保存されますが、デフォルトでは公開されません。公開する準備ができるまでこの方法でコードを編集し続けます。
2. 公開する準備ができたら、ドラフトを公開するために1つ以上の公開環境に承認します。ドラフトは読み取り専用モードに入ります（ロックアイコンで示されます）。次の公開時に選択した環境では、編集ができなくなります（ライブラリを除く）。ドラフトのロックの色は、対応する環境のアイコンの横に表示されます。

   

3. ドラフトが公開されると、ライブコードは対応する公開環境でのみ確認できます（読み取り専用モード）。公開環境でコードを直接編集することはできません。変更を加えるには、ドラフトを編集し、公開ワークフロープロセスを繰り返します。

   

コードエディタの機能

JavaScriptコード拡張機能は、以下の便利な機能を備えたAceエディタを使用しています。

• 構文チェック
  入力するときに構文エラーや警告を表示します。マージンには、影響を受ける行に注意が必要であることを示す便利なアイコンが表示されます。
  

  

• 構文のハイライト
  JavaScriptのための言語に対応した構文のハイライト表示。
• 自動インデントとアウトデント
  入力すると自動的にインデントが行われます。tabキーとshift+tabキーのバインディングをサポートしています。
• コードの折りたたみ
  コードブロックを折りたたんで、注意を散らすことなく変更に集中します。
  

  

• フルスクリーンモード
  コードエディタウィンドウをフルスクリーンモードに拡大して、大規模なコードプロジェクトで作業します。

コードの実行

ドラフトが公開されると、コードはutagファイルの1つに追加されます（スコープに応じて）。重要な点として、コードは次の匿名関数で囲まれたまま実行されます。

function(a, b) 
{
    // JavaScriptコード拡張機能の内容がここで実行されます
}

関数に渡される2つのパラメータは次のとおりです。

• a - イベントのタイプ（“view"または"link"またはカスタム値）
• b - b.VARIABLE_NAME="somevalue"のようにUDO値を構成するためのutag_dataへの参照。

グローバル変数を上書きしないように、すべての変数参照を適切にスコープ化してください。

コードの比較

ドラフトまたは公開環境を他のドラフトまたは公開環境と比較することができます。比較ウィンドウには、コードのバージョンが並べて表示され、異なる各行にハイライトが表示されます。たとえば、Prod vs QA、Draft 1 vs Draft 2、またはDraft 1 vs Prodを比較できます。

拡張機能の使用方法

始める前に、拡張機能の動作方法について理解してください。

拡張機能が追加されたら、以下に説明する方法でドラフトを作成します。

ドラフトの操作

ドラフトを使用して拡張機能にJavaScriptコードを追加します。

ドラフトを作成するには、次の手順を実行します。

1. サイドバーのドラフトの下で、+ 追加をクリックします。
2. テキストウィンドウにJavaScriptコードを入力または貼り付けます。
3. プロファイルを保存して変更を保持します。

ドラフトを使用する際には、次の関数が利用できます。

• ドラフト名: ドラフトの名前を構成します。名前はサイドバーに表示され、ドラフトのリストでアルファベット順に並べられます。
• リセット: プロファイルが保存されてから行われたドラフトへのすべてのコード編集を元に戻します。
• 削除: ドラフトを削除します。元に戻すには、保存せずにプロファイルを更新します。
• 差分の比較: ドラフトと他のドラフトまたは公開環境との比較を行います。
• 公開キューに追加: ドラフトを1つ以上の公開環境に公開するためにマークします。

ファイルをドラフトモードにコピーする

GitHubを介して追加されたファイルは読み取り専用であり、編集することはできません。これらのファイルを編集するには、GitHubで直接編集するか、ファイルをドラフトモードにコピーして編集します。

ファイルをドラフトモードにコピーして編集し、公開する前に保存する手順は次のとおりです。

1. ドラフトモードにコピーするファイルを選択します。

2. ドラフトにコピーをクリックして、ファイルの内容を新しいドラフトテンプレートにコピーします。

3. 名前を入力してEnterキーを押します。 新しい名前を入力するか、同じ名前を保持します。

   同じ名前を保持する場合、ファイル名と同じ名前になります。たとえば、GitHubのファイル名がTealium.jsの場合、最初のコピーはTealium.jsになります（同じ名前のドラフトが存在しない場合）。2回目以降のコピーはTealium.js-1、Tealium.js-2などの名前になります。

4. コピーを開いて編集します。

5. 保存をクリックします。

ドラフトを公開する

ドラフトを公開するには、2つの手順が必要です。まず、拡張機能でドラフトを公開キューに追加し、次にプロファイルを対応するターゲットに公開する必要があります。

デフォルトでは、ドラフトは公開に含まれません。公開キューに明示的に追加されていない限り。

ドラフトを公開するには、次の手順を実行します。

1. サイドバーで目的のドラフトを選択します。
2. **公開キューに追加…**をクリックします。
3. 公開する場所の横にあるチェックボックスをオンにします。
4. 続行をクリックします。
   ドラフトは読み取り専用モードになります（南京錠アイコンで示されます）し、公開キューに追加された環境はサイドバーとドラフトの詳細に表示されます。
   

   

5. プロファイルを保存して公開し、公開キューに一致する公開ターゲットを選択します。
   公開されたドラフトは、サイドバーの対応する公開環境でアクティブなコードとして表示されます。
   

   

GitHubとの連携

以下のセクションでは、GitHubリポジトリ内のファイルを参照する方法について説明します。拡張機能に直接コードを書く代わりに、この機能を使用してください。

GitHubのファイルを使用するには、GitHubアカウントをiQ Tag Managementアカウントにリンクする必要があります。 GitHubとの連携について詳しくはこちらをご覧ください。

GitHubファイルの追加

GitHubリポジトリからファイルを参照するには、次の手順を実行します。

1. JavaScriptコード拡張機能の左パネルで、+ 追加の横にあるGitHubファイルをクリックします。
   追加するファイルのURLを入力するように求められます。
2. URLを入力します。たとえば、https://github.com/your_account/your_repository/blob/master/Tealium.js
3. ファイルを追加をクリックすると、コードが拡張機能で参照されるようになります。

プライベートリポジトリのファイルにアクセスするには、repoスコープが選択されたパーソナルアクセストークンを使用してGitHubアカウントをリンクする必要があります。

ファイルの同期

参照ファイルの新しいバージョンがある場合、ファイルを同期する必要があります。JavaScriptコード拡張機能の表示を展開して、参照ファイルを同期します。

GitHubのすべてのファイルは、拡張機能を開くと同期を試みます（公開承認されていない場合を除く）。

次の手順でファイルを手動で同期します（公開承認されたファイルも含む）。

1. 同期するファイルを選択します。
2. ファイルを同期をクリックして、リポジトリから最新のコピーを取得します。
   更新されたファイルは、時刻と日付とともに表示され、緑のチェックマークで最新のファイルであることを示します。

GitHubのファイルを使用する場合、常にインターフェースの上部に作業しているファイル名が表示されます。完全なファイルパスを表示するには、ファイル名の上にカーソルを置きます。

ファイルを公開キューに追加

公開キューに追加されたファイルは同期できず、ファイル名の横にロックアイコンが表示されます。公開キューに追加されたファイルを同期しようとすると、新しいバージョンに同期できないことを示す警告アイコンが表示されます。

次の手順でファイルを公開キューに追加します。JavaScript Draft Extensionを使用する場合と同様です。

1. 公開キューに追加するファイルを選択します。
2. 公開承認をクリックし、ファイルのステータスには、タイムスタンプとユーザー名が表示され、ファイルが公開された環境が表示されます。

ベストプラクティス

ヒント

この拡張機能を最大限に活用し、一般的なミスを避けるために、次のヒントを使用してください。

• <script>タグを省略: コードを<script>タグで囲まないでください。テキストボックスの内容は、入力したままのJavaScriptファイルに含まれます。
• UDOを参照する: utag_dataオブジェクトから変数を参照する場合、bオブジェクトを使用してb['page_name']のように使用します。詳細については、bオブジェクトを参照してください。
• タグテンプレート変数を参照する: スコープ付きタグのタグテンプレートで定義された変数を参照する場合、u['account_id']のように使用します。
• 有用なドラフト名を作成する: TiQプロファイルは共有の作業環境なので、ドラフトの名前を意味のあるものにして、自分自身や他のユーザーが簡単に識別できるようにします。
• コードにコメントを追加する: コードを理解し、メンテナンスするために、将来の自分や他のユーザーがコードとそのメンテナンス方法を理解しやすくするために、有用なコメントを書いてください。

利点と欠点の理解

JavaScriptコード拡張機能は非常に柔軟で、タグ管理ソリューション内で達成したいほとんどのことに使用できますが、アカウントの長期的な成功に与える影響を理解することが重要です。JavaScriptコード拡張機能を使用する前に、他の組み込みの拡張機能を使用してタスクを達成しようとすることを強くお勧めします。

以下の環境と利点と欠点を考慮して、この拡張機能を使用する前に検討してください。

利点

• 完全にカスタマイズ可能なコードで、JavaScriptで実現できるほとんどのことが可能です。
• フロントエンドのJavaScriptの記述に慣れている開発者にとっては、より高速です。

欠点

• 非開発者が理解して編集するのが難しいです。
• 長期間にわたるメンテナンスが困難です。
• タイプミスや論理エラーが発生しやすいです。
• 変数名はハードコードされており、データレイヤーの変数名を変更しても変数名が更新されません。たとえば、変数名を変更する場合は、JavaScriptコード拡張機能内のすべての出現箇所も変更する必要があります。

FAQ

廃止予定のJavaScriptコード拡張機能を引き続き使用できますか？

はい、古いバージョンのJavaScriptコード拡張機能は引き続き通常通り動作します。

JavaScriptコード拡張機能を追加または編集できないのはなぜですか？

JavaScriptコード拡張機能を編集できない理由は次のとおりです。

1. ドラフトが公開キューに追加され、公開がまだ行われていない場合、ドラフトは読み取り専用モードになります。ドラフトを公開キューから削除するか、プロファイルを公開してドラフトを再度編集可能にする必要があります。
2. 公開環境で表示されるコードは直接編集できません。これは公開されたコードの読み取り専用ビューです。

公開キューで公開環境を選択できないのはなぜですか？

JavaScriptコード拡張機能を追加し、ドラフトを作成する権限があるかもしれませんが、ドラフトを公開環境にプロモートするためには別の権限が必要です。公開キューに追加ダイアログで環境を選択できない場合は、JavaScript Draft Promotion permissionを持っているかどうか確認してください。

Pre Loaderのスコープを構成できないのはなぜですか？

条件が定義されている場合、Pre Loaderオプションは使用できなくなります。Pre Loaderスコープでは、データレイヤーはまだ作成されていないため、条件のロジックを評価するためのデータオブジェクトはありません。同様に、スコープがPre Loaderに構成されている場合、条件の追加オプションは無効になります。

Pre LoaderとLoad Rulesの前に一度だけ実行するのはどう違いますか？

Pre LoaderとLoad Rulesの両方が、データレイヤーが作成される前とロードルールが評価される前に、拡張機能が1回だけ実行されるようにします。違いは、Pre Loaderスコープでは条件がサポートされないことです。