Web container setup
A web container is a JavaScript file which has two purposes:
· To be able to use native functions & methods of the TMS
· To execute the partners solutions (tags) contained inside
It is possible, as it is often the case, to have several containers for the same site or even the same page.
The URL of each JavaScript Web Container file will be provided alongside the Container IDs and Container Names by a Commanders Act Consultant during the setup process.
Implementation of the containers on the page
Web container are usually installed by implementing a <script> html node on every page of your website that holds a src attribute that points to the Container URL.
The containers can be placed in different locations in the page source’s code depending on their use and your type of business.
Here’s a common example with 3 containers:
A/B-test (optional)
In the <head>
Analytics
At the beginning of <body>
Marketing
At the end of </body >
<head> container's location is usually used for AB test and should be load synchronously, to prevent flickering effect.
We recommended to implement all <body> containers asynchronously. Simply use the async attribute in the <script> element.
Installation of <head> Container
<head> Container<head> Container are used to implement A/B-testing and personalisation Tags that usually impact the visual content of a website before it is presented to the user. Therefore it is important to place them as high as possible in the <head> section of your website.
Please ensure that the <head> Container file is loaded synchronously to avoid potential content flickering effects.
Installation of <body> Container
<body> Container<body> Container are used to implement Tags that measure information. These Containers are therefore placed at the end of the <body> section to make sure they have minimal impact on the loading time of the content of the website.
In contrast to the <head> Container it is possible to implement <body> 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 <script> element.
Installation via JavaScript Loaders
It is possible to implement JavaScript Container files with JavaScript loaders like RequireJS or HeadJS. On the opposite it is not possible to bundle the JavaScript Container files with bundlers like Webpack or ParcelJS to make sure that the Container files are dynamically loaded from the CDN or server on each page request. Otherwise users will not be able to manage Commanders Act Web Container on their own.
Testing
Via Browser Console
It is possible to log all loaded Container files on a site via the JavaScript console of the browser. The JavaScript object tC.containersLaunched provides information of each loaded Web Container.
Following you will find an example object including its most relevant information:
Definitions
Account ID
Unique account ID of your workspace on our platform. Also called "Site ID". Log in into your Commanders Act account and look for the first numeric value in your address bar. e.g. with "https://app.commandersact.com/en/1234/", your account identifier is "1234".
Container ID
Unique ID of the Container within your account. e.g. "15".
Container Name
Label of the Container. Can be configured in the "container settings" of TMS. e.g. "Header Container".
Container Filename
Name of the Container JavaScript file, can be configured in the "container settings" of TMS. 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. e.g. "55.16".
Last updated
Was this helpful?