# Websites It is necessary to implement one or multiple Container and optionally a Data Layer and event Trigger to install TagCommander on a website. {% hint style="info" %} Websites use the Client-Side version of TagCommander. {% endhint %} ## Container Setup A TagCommander Container is a version-controlled JavaScript file that bootstraps the tag management system functionality on a website. To implement and update Tags, users will generate new versions of the Container JavaScript file. ### Definitions | Metric | Description | | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | **Container ID** | Unique ID of the Container within your account. e.g. 21 | | **Container Name** | Label for the Container. Can be configured in the Options of TagCommander. e.g. "Header Container" | | **Container Filename** | Name of the Container JavaScript file, can be configured in the Options of the TagCommander interface. e.g. "tc\_header\_21.js" | | **Container URL** | Complete URL of the Container used for installation. Depends on the hosting method. e.g. "//cdn.tagcommander.com/1234/tc\_footer\_main\_20.js" | | **Container Version** | Snapshot of a Container JavaScript file. | ### Installation To implement TagCommander it is necessary to implement one or multiple TagCommander JavaScript Container files on the website. The URL of each JavaScript Container file will be provided alongside the Container IDs and Container Names by a Commanders Act Consultant during the setup process. [Here](/web-container/tips-and-tricks/best-practices/common-container-strategies.md) you can find an overview of common Container setups. Container are usually installed by implementing a ` (...) (...) ``` Please ensure that the `` Container file is loaded synchronously to avoid potential content flickering effects. #### Installation of `` Container `` Container are used to implement Tags that measure information. These Containers are therefore placed at the end of the `` section to make sure they have minimal impact on the loading time of the content of the website. ```markup (...) (...) ``` In contrast to the `` Container it is possible to implement `` Container asynchronously. For example it is possible to load them via JavaScript on the `onload` event of the page or it is possible to use the `async` attribute in the ` ``` The Data Layer needs to be filled with information before the TagCommander Container file is loaded—otherwise information might not be available at the time the Container JavaScript executes. {% hint style="warning" %} #### Race Conditions Race conditions between the Data Layer properties and the Container JavaScript can be difficult to identify and debug by TagCommander users. It is therefore important to avoid them during installation! {% endhint %} In case multiple Containers are used on the same page it is possible to fill the Data Layer in multiple steps. Global information like the page type should be made available before the first Container is loaded. Information that is only relevant for a certain Container (e.g. product information) can be appended prior to the respective Container. Following example outlines how a Data Layer can be installed in case both a `` and a `` Container are used on a website. ```markup (…) (…) ``` {% hint style="info" %} #### Data Layer Naming Convention As outlined in the example above the properties of the Data Layer are usually grouped with a prefix notation. E.g. `env_` is used to group environment information and `user_` is used to group user information. In case a property is not relevant for a certain page (e.g. `product_name` on the privacy policy page) it is recommended to fill it with an empty value (e.g. `""`, `0`, `[]` or `{}`). {% endhint %} ### Testing #### Via JavaScript Console It is possible to investigate the Data Layer in the JavaScript console by logging `tc_vars`. Following you will find an example output of a `tc_vars` Data Layer in the JavaScript Console. ```javascript { env_template: "homepage", env_work: "prod", page_name: "Homepage", page_keywords: ["homepage", "home", "entrypage", "index"], product_name: "", (…) } ``` #### Via Quality Assurance Tag The Tag template *Commanders Act - Data Layer QA* in the TagCommander Tag library automatically outputs Data Layer information to the JavaScript console on each page. This approach has the advantage that it logs a snapshot of the Data Layer at the exact time the Container JavaScript was executed. This allows to identify race conditions between the Data Layer properties and the Container JavaScript to make sure all necessary properties are available in time. #### Via Chrome Extension The [Commanders Act Assistant Chrome Extensions](https://chrome.google.com/webstore/detail/commanders-act-assistant/lfaifjhjdolnpnlgeohohaalbeidhlpj) shows the Data Layer properties of the currently visited page. ## Trigger Setup TagCommander Triggers are onsite events that are used by TagCommander users to dynamically execute Tags. ### Definitions | Metric | Description | | ---------------------- | ----------------------------------------------------------------------------------------------------------- | | **Trigger Label** | Label for an event that is used by TagCommander users to execute Tags. e.g. add\_to\_basket | | **Trigger Data Layer** | A JavaScript object that can be accessed by Tags that are executed on the related Trigger. e.g. product\_id | ### Installation TagCommander allows to set up common Trigger automatically without the involvement of technical personnel (e.g. *Container loaded*, *DOM ready* or *Vertical Scroll 25%*). In cases where the default Triggers are not sufficient it is possible for technical personnel to implement custom Triggers. The necessary Trigger are defined during the TagCommander setup process, but you can find a list of common Trigger [here](/web-container/tips-and-tricks/best-practices/common-trigger-strategies.md). To install a custom Trigger on the website it is necessary to call a JavaScript function with the following pattern: ```javascript tC.event.{{ Trigger Label }}(this, {{ Trigger Data Layer }}); ``` A typical example is an *Add to basket* event where the product id of the selected product is sent with the event: ```javascript tC.event.add_to_basket(this, { product_id: "12345" }); ``` {% hint style="info" %} #### Trigger Data Layer Properties A common approach for the Trigger Data Layer is to always use the same properties like `event_label`, `event_type` and `event_value`—so in case of an `add_to_basket` Trigger the `event_value` would hold the product id of the selected product and in case of a `video_play` event the `event_value` would hold the current position within the video timeline. This allows to avoid to create multiple custom variable names for each individual event and therefore makes Trigger more generic. {% endhint %} {% hint style="warning" %} #### Trigger Error Handling In some situations it might happen, that a user interacts with a custom Trigger before the TagCommander JavaScript Container file was loaded. In this case using the Trigger function would cause a JavaScript `ReferenceError`. Therefore it is recommended to check the availability of the Trigger function before using it. ```javascript if (tC && tC.event && typeof tC.event.add_to_basket === "function") { tC.event.add_to_basket(this, { product_id: "12345" }); } ``` {% endhint %} ### Testing #### Via Quality Assurance Tag The Tag template *Commanders Act - Data Layer QA* in the TagCommander Tag library automatically outputs Data Layer information to the JavaScript console when executed. Assigning this Tag with the Trigger allows to log a snapshot of the Data Layer when the respective Trigger is executed. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://community.commandersact.com/web-container/user-manual/setup-guides/websites.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.