Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Installation Instructions for Commanders Act Web Container with VueJS.
In this section you will find all our guides for implementation of a browser side tracking trough a web container
Installation Instructions for Web container with Angular.
Installation Instructions for TagCommander with AngularJS.
Installation Instructions for Commanders Act Web Container with React.
Installation Instructions for Commanders Act TMS for direct HTTP connections.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="{{ head_container_URL }}"></script>
(...)
</head>
(...)
</html><!DOCTYPE html>
<html>
(...)
<body>
(...)
<script src="{{ body_container_URL }}"></script>
</body>
</html>{
1234: { // Commanders Act Account ID
1: { // ID of the 1st loaded Container
g: 15,
v: "5.15" // Version of the 1st loaded Container
},
5: { // ID of the 2nd loaded Container
g: 20,
v: "55.16" // Version of the 2nd loaded Container
}
}tC.event.{{ Trigger Label }}(this, {{ Trigger Data Layer }});tC.event.add_to_basket(this, { product_id: "12345" });event_valueif (tC && tC.event && typeof tC.event.add_to_basket === "function") {
tC.event.add_to_basket(this, { product_id: "12345" });
}<!doctype html>
<html amp lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Commanders Act – AMP Analytics</title>
<link rel=”canonical” href=”http://example.ampproject.org/article-metadata.html” />
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<!– Mandatory execution of the AMP Analytics Script “https://cdn.ampproject.org/v0/amp-analytics-0.1.js” –>
<script async custom-element=”amp-analytics”
src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js“></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
</head>
<body
<amp-analytics id=”commandersact”>
<!– JSON data structure containing the TagCommander data layer –>
<script type=”application/json”>
{
“vars”: {
“tC_SiteID”: “3503”,
“tC_ContainerID”: “1”,
“env_template” : “homepage”,
“env_work” : “prod”,
“env_device” : “m”,
“env_country” : “IT”,
“page_name” : “amp_homepage”,
“user_id” : “”,
“user_newcustomer” : “”,
“order_id” : “”
},
<!– Call to Commanders Act’s API (server-side) –>
“requests”: {
“tC_BaseURL“: “//serverside${tC_SiteID}.tagcommander.com/${tC_ContainerID}/”,
<!– Page variables mentioned in the “tC_PageTrack” element –>
“tC_PageTrack“: “${tC_BaseURL}?&env_template=${template}&env_work=${work_environment}&env_device=${device}&env_country=${country}&page_name=${page_name}&user_id=${user_id}&user_newcustomer=${newcustomer}&order_id=${order_id}”,
<!– Event variables mentioned in the “tC_EventTrack” element. Note: “scroll” and other such variables are natively proposed in AMP pages–>
“tC_EventTrack“: “${tC_PageTrack}&scrollY=${scrollTop}&scrollX=${scrollLeft}&height=${availableScreenHeight}&width=${availableScreenWidth}&scrollBoundV=${verticalScrollBoundary}&scrollBoundH=${horizontalScrollBoundary}${eventLabel}”
},
<!– Additional parameters mentioned in the “extraUrlParams” element. Note: the clientId function creates a unique ID per visitor (different from the regular TCIDs)–>
“extraUrlParams”: {
“TCID_AMP”: “${clientId(TCID_AMP)}”,
“path”: “${ampdocUrl}”,
“type”: “${type|default:page}”,
“platform”: “AMP”,
“r”: “${random}”
},
<!– Execution of Commanders Act hits on the “triggers” element. “Pageview” sends the hit to the page viewed, the “clickPings” trigger sends the hit to an event defined in the “selector” –>
“triggers”: {
“pageview”: {
“on”: “visible”,
“request”: “tC_PageTrack”,
“vars”: {
“type”: “page”
}
},
“clickPings”: {
“on”: “click”,
“selector”: “.tC_events”,
“request”: “tC_EventTrack”,
“vars”: {
“type”: “event”
}
}
}
}
</script>
</amp-analytics>
<h1 id=”header”>AMP Page</h1>
<!– data-vars-event-label2 allows to collect additional variables, such as event variables –>
<span id=”event-test” class=”tC_events” data-vars-event-label2=”22″>
Click here to generate an event
</span>
</body><!doctype html>
<html amp lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Commanders ACT – Serverside – AMP Analytics</title>
<link rel=”canonical” href=”http://example.ampproject.org/article-metadata.html” />
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<!– Mandatory execution of the AMP iframe script “https://cdn.ampproject.org/v0/amp-iframe-0.1.js ” –>
<script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
</head>
<body>
<!– Call to the TagCommander iframe “https://academy.commandersact.com/AMP/iframe.php” containing the data layer variables. Note: the iframe must belong to a different domain from that of the website (except if the allow-same-origin parameter is added) and be https –>
<amp-iframe width=1 height=1 src=”https://academy.commandersact.com/AMP/iframe.php? env_template=homepage&env_work=prod&env_device=m&env_country=IT&page_name=amp_homepage&user_id=&user_newcustomer=&order_id=” sandbox=”allow-scripts allow-same-origin” layout=”fixed” frameborder=”0″>
<!– Adding content to the iframe is mandatory (a pixel in this case)–>
<amp-img src=”https://academy.commandersact.com/AMP/pixel.gif” height=1 width=1 layout=”fill” placeholder></amp-img>25
</amp-iframe>
<h1 id=”header”>AMP Page</h1>
<span id=”event-test” class=”tC_events” data-vars-event-label2=”22″>
Click here to generate an event
</span>
</body>
</html>tC.container.reload({ exclusions: ["datastorage","deduplication","internalvars","privacy"], events: {label1: [{targeted_element},{event_variables}], label2: [{},{}]}})<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.tc_vars = Object.assign({}, window.tc_vars, {
env_template: "homepage",
env_work: "prod"
});
</script>
<script src="{{ head_container_URL }}"></script>
(…)
<head>
<body>
(…)
<script>
window.tc_vars = Object.assign({}, window.tc_vars, {
page_name: "Homepage",
page_keywords: ["homepage", "home", "entrypage", "index"]
});
</script>
<script src="{{ body_container_URL }}"></script>
</body>
</html>{
env_template: "homepage",
env_work: "prod",
page_name: "Homepage",
page_keywords: ["homepage", "home", "entrypage", "index"],
product_name: "",
(…)
}