JavaScript Code Extension (deprecated)

JavaScript Code Extension (deprecated)

by on ‎08-14-2018 02:40 PM - edited 2 weeks ago by Community Manager (157 Views)

This version of the JavaScript Code extension is deprecated. Go to the new version of the JavaScript Code Extension.


The JavaScript Code Extension is designed for implementing custom JavaScript code through Tealium iQ. It comes with a built-in code editor and configuration options for when and where to run the code.

In this article:

Table of Contents Placeholder

Prerequisites

How It Works

The JavaScript Code extension give you the power to write custom code to be included in the files that load on your site. Depending on the scope of the extension the code either loads in utag.js or in a vendor utag.#.js file.  The code entered into the text box of the extension is included in the utag files just as it appears, but it's important to note that the code is run from an anonymous function wrapper,  like this:

function(a, b) {
    // content of JavaScript Code extension runs here
}

The parameters represent the following:

  • a: indicates which tracking call was made "view" for utag.view() and "link" for utag.link().
  • b: a reference to the data object passed to the tracking call.

While the JavaScript Code extension is very flexible and can be used for virtually anything you would want to accomplish within your tag management solution, it's important to understand the impact it could have on your account. We strongly recommend that you try to use the other built-in extensions to accomplish your task before turning to the JavaScript Code extension. Please consider the following:

Pros

  • Fully customizable code can accomplish virtually anything that can be done in JavaScript.
  • Faster and more familiar for developers that are used to writing front-end JavaScript.

Cons

  • Difficult for non-developers to understand and edit.
  • More difficult to maintain over time.
  • Prone to typos and logic errors.
  • Variable names are hard-coded and therefore not updated if you change the name of a variable on the Data Layer tab.
  • A changed variable name will not be propagated to the JavaScript Code extension (i.e. if you change the name of a variable you must also change all occurrences of that variable within JavaScript Code extensions.)

Conditions

Conditions add an extra layer of control on top of the Scope. You can apply any number of conditional statements, just like you would in the Set Data Values and Join Data Values Extensions, to control when the JavaScript Code extension will run.

Execution Order and Run Once

The JavaScript Code extension offers the following options for determining the timing of when the code will run (learn more order of operations in utag.js):

  • Before Load Rules
  • After Load Rules (default)
  • After Tags
  • Run Once after Load Rules
  • Run Once before Load Rules
  • Run Once after Tags

By default, a JavaScript Code Extension runs for every tracking call, including in-page event tracking, which would potentially cause it to run more than once per page load. If you want to prevent multiple executions of your code, choose one of the Run Once options in the execution drop-down list. These options are only available in the All Tags scope and require utag v4.38 or higher.

Before You Begin

Here are a few things to be consider:

  • Do not surround the code with <script> tags since the content of the text box will be included in a JavaScript file exactly as you enter it.
  • If you are referencing a variable from the utag_data object (e.g. page_name or language), use b['VARIABLE']. (Learn more about the b object.)
  • If you are referencing a variable defined in the tag template of the scoped tag (e.g. account_id or base_url), use u['VARIABLE'].

Configuration Steps

Use the following steps to configure the JavaScript code extension:

  1. Go to the Extensions Marketplace and add the JavaScript Code Extension from the Advanced tab.
    extension configuration.png
  2. Title: Enter a name for this extension.
  3. Scope: Choose from the following options:
    • Preloader (does not support Conditions)
    • DOM Ready
    • All Tags
    • Vendor Tag(s)
  4. Execution: This drop-down list is only available to the All Tags scope. Choose one of the following options:
    • Before Load Rules
    • After Load Rules (default)
    • After Tags
    • Run Once after Load Rules
    • Run Once before Load Rules
    • Run Once after Tags
  5. Enter your JavaScript Code in the editor.
  6. Condition (optional): Click Add Condition and create a conditional statement. The first drop-down list is populated with variables and the second drop-down list provides a list of evaluating operators. If you are running the conditional logic against a value, be sure to enter it in the text field. To apply multiple conditions, choose between the AND and OR logic.
    sample condition.png

    Use the + button inside the box for AND and the + button outside for OR.

     

  7. Save and publish the changes. 

Frequently Asked Questions (FAQ) 

Why am I unable to add or edit the new JavaScript Code Extension?

You do not have the Manage JS Code Extension permission in your Tealium iQ account. Contact your Tealium account administrator to obtain the permission.

Why can't I select Preloader with Conditions?

In the preloader state, the Data Layer is not yet populated and there is no utag data with which to evaluate the conditional logic. For this reason, the Conditions drop-down selections are greyed out when Preloader is selected.

What's the difference between Preloader and Run Once Before Load Rules? 

Both will cause the Extension to run once before the Data Layer is populated—except the Preloader does NOT support conditions. Be mindful of this caveat when configuring the Scope.