- TLC Home Home
- Discussions & Ideas Discussions & Ideas
- Product Guides Product Guides
- Knowledge Base Knowledge Base
- Developer Docs Developer Docs
- Education Education
- Blog Blog
- Support Desk Support Desk
Use the Advanced JavaScript Code extension to write JavaScript code in an enhanced editor with syntax checking, perform code diffs, GitHub integration, and a draft mode for a safe-guarded publish workflow.
For basic JavaScript code, see JavaScript Code Extension (Basic).
In this article:
The JavaScript Code extension has its own publish workflow that uses drafts and a publish queue. Drafts are in-progress versions of the code that are preserved when you save the profile, but are not included in the published files by default. The publish queue allows you to mark a draft to be published, which causes it to become read-only and includes it in the next publish to the corresponding environment.
This new publish workflow ensures that your code doesn't get published until it's ready. It allows you to see what code has been published to each environment and easily compare code between drafts and environments.
For information about using the JavaScript Code extension with GitHub, see Syncing with GitHub
Use drafts to maintain different versions of the code without affecting your published profile. Drafts are only published when you specify an environment using the Approve for Publish workflow.
Drafts are named versions of the JavaScript code. Each instance of the extension holds up to 20 drafts. Drafts are are saved each time the profile is saved, but are only published when they are explicitly added to the publish queue for specific environments. This allows you to edit code and save your progress (even if it is incomplete), without affecting your publish environments.
The JavaScript Code extension has its own publish workflow to provide safer and more granular control over what code gets published. Drafts are not published by default. To publish a draft, you add it to the publish queue for it to be included in the next publish.
You must have the JavaScript Draft Promotion permission to add a draft to the publish queue.
Follow this workflow:
Step 1: Create a Draft
Add a new draft and write your custom JavaScript code. Save the profile and the code in the draft is saved but not published. Continue working on your code in this way until it's ready to be published.
Step 2: Approve for Publish
When you are ready to publish, approve the draft to be published for one or more publish environments. The draft enters read-only mode (indicated by the lock icon) until the next publish to the selected environments, at which point it becomes editable again, except in libraries. The color of the lock next the draft matches the icon next to the corresponding environment.
Step 3: Published Environments
Once a draft has been published, the live code is only reviewable (read-only mode) in the corresponding publish environments. You cannot edit the code in a publish environment directly. To make changes, edit a draft and repeat the publish workflow process.
The JavaScript Code extension employs an advanced code editor (Ace Editor) built into the interface that offers the following convenience features:
tab
key and shift+tab
key bindings.Once a draft is published, the code is added to one of the utag files (depending on the scope). It's important to note that the code runs just as it appears in the code editor, but is wrapped in the following anonymous function:
function(a, b) {
// content of JavaScript Code extension runs here
}
The two parameters passed to the function are:
a
- the event type ("view" or "link" or a custom value)
b
- a reference to utag_data
allowing you to set UDO values as b.VARIABLE_NAME="somevalue"
.
Be sure to scope all of your variable references accordingly to avoid overwriting global variables.
Compare a draft or a publish environment to any other draft or publish environment. The comparison window displays the versions of the code side by side with highlights for each line that differs. For example, compare Prod vs QA, Draft 1 vs Draft 2, or Draft 1 vs Prod.
Before you begin, familiarize yourself with how extensions work.
Once the extension is added, create a draft as described below.
Add JavaScript code to the extension using drafts.
To create a draft:
The following functions are available when working with a draft:
Files added through GitHub are read only and cannot be edited. To edit these files, edit directly in GitHub or copy the file to Draft mode and edit the draft copy.
Use the following steps to copy the file to draft mode, edit, and save prior to publishing:
If you choose to keep the same name, names remain the same as the file name. For example, if the GitHub filename is Tealium.js
, the first copy becomes Tealium.js
(if a draft with that name does not already exist). Subsequent copies are named Tealium.js-1
, Tealium.js-2,
and so on.
Publishing a draft is a two-step process. First, in the extension the draft must be added to the publish queue for the desired publish environment. Second, the profile must be published to the corresponding target.
Remember, by default, drafts are not included in a publish unless they have been explicitly queued for publish.
To publish a draft:
The following sections describe how to reference files in a GitHub respository. Use this feature instead of writing code directly in the extension.
To work with GitHub files you must link your GitHub account to your iQ Tag Management account.
Learn more about Linking to GitHub.
To reference a file from a GitHub repository:
https://github.com/your_account/your_repository/blob/master/Tealium.js
To access files in a private repository, you must link your GitHub account with a personal access token that has the repo scope selected.
Learn more about personal access tokens and the repo scope.
When there is a newer version of a referenced file, you must synchronize the file. Synchronize a referenced file by expanding the view of the JavaScript Code extension.
All GitHub files attempt to sync when you open the extension unless the file is approved for publish.
Use the following steps to manually synchronize a file, including those approved for publish:
When working with GitHub files, the filename you are working with always displays at the top of the interface. To view the full file path, hover over the filename.
Files queued for publish cannot be synchronized and display a lock icon next to the filename. If you attempt to synchronize a file that is queued to publish, an warning icon displays to indicate that the you are unable to connect to synchronize to new version.
Use the following steps to queue your file for publish, as you do when using the JavaScript Draft Extension
Use the following tips to make the best use of this extension and avoid common mistakes:
<script>
tags. The content of the text box is included in a JavaScript file exactly as you enter it.utag_data
object, such as page_name
, use the b
object like this: b['page_name'
]. Learn more about the b object.account_id
, use u['account_id']
.While the JavaScript Code extension is very flexible and may be used for virtually anything you want to accomplish within your tag management solution, it's important to understand the impact it may have on the long-term success of your account. We strongly recommend that you try to use the other built-in extensions to accomplish a task before resorting to the JavaScript Code extension.
Consider your environment and the following pros and cons prior to using this extension:
Pros |
---|
|
Cons |
---|
|
Yes. The older versions of the JavaScript Code extension continues to operate normally, but are not able to add a new one using the old version.
The following reasons may explain why you are unable to edit the JavaScript Code extension:
While you might have permission to add the JavaScript Code extension and create drafts, there is a separate permission needed to promote a draft to a publish environment. If you do not have this permission, the environments in the Queue for Publish dialog is not selectable.
Check with your account administrator to see if you have the JavaScript Draft Promotion permission.
If you have a condition defined, the Pre Loader option is no longer available. In Pre Loader scope, the data layer is not yet populated so there is no data object with which to evaluate the conditional logic. Likewise, the Add Condition option is disabled when the scope is set to Pre Loader.
Both Pre Loader and Run Once Before Load Rules cause the extension to run once before the data layer is populated and before load rules are evaluated. The difference is that conditions are not supported in the Pre Loader scope.
Copyright All Rights Reserved © 2008-2022