- TLC Home Home
- Discussions & Ideas Discussions & Ideas
- Product Guides Product Guides
- Knowledge Base Knowledge Base
- Developer Docs Developer Docs
- Education Education
- Blog TLC Blog
- Support Desk Support Desk
Use the 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.
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.
Here's how it works:
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 code to the extension using drafts. To create a draft and enter JavaScript code:
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 synchronize GitHub files in TiQ.
When working with GitHub files in TiQ, the filename you are working with always displays at the top of the interface. To view the full file path, simply hover over the filename.
Use the following steps to add a file from GitHub to TiQ:
https://github.com/your_account/your_repository/blob/master/Tealium.js
Automatically sync files by opening 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 sync files, including those approved for publish:
Files queued for publish cannot be synced and display a lock icon to the right of the filename. If you attempt to sync a file that is queued to publish, an orange warning icon displays to indicate that the you are unable to connect to sync 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-2021