> For the complete documentation index, see [llms.txt](https://doc.commandersact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.commandersact.com/fr/fonctionnalites/sources/sources-catalog/web/containers/setup-guides-for-developers/amp.md).

# AMP

{% hint style="info" %}
Les Accelerated Mobile Pages (AMP) utilisent la version server-side de notre TMS
{% endhint %}

## Définition d’AMP

AMP, qui signifie Accelerated Mobile Pages, est une technologie issue de l’initiative open source Digital News Initiative (DNI) entre Google et des éditeurs européens. AMP est un format permettant de créer du contenu mobile optimisé afin d’améliorer l’expérience utilisateur.

Si vous souhaitez en savoir plus sur les AMPs, cliquez sur les liens suivants :

\[FR] <https://www.ampproject.org/fr/learn/about-amp/>

\[EN] <https://www.ampproject.org/learn/about-amp/>

## Mise en œuvre de Commanders Act sur les AMPs

AMP bloque les fichiers JavaScript synchrones appelés sur vos sites web afin d’augmenter la vitesse de chargement des pages mobiles. Pour que votre conteneur Commanders Act soit compatible, vous devez adapter sa configuration afin qu’elle soit conforme aux exigences d’AMP.

Ci-dessous, vous trouverez un exemple montrant comment configurer un conteneur Commanders Act sur vos pages AMP. Nous recommandons d’utiliser le tag \<amp-analytics> (<https://www.ampproject.org/docs/reference/components/amp-analytics>) pour définir votre data layer et le conteneur.

**Important**: Cette opération fait appel à l’API de Commanders Act et nécessite donc qu’un conteneur server-side soit configuré dans l’interface utilisateur de Commanders Act.

### **Exemple de configuration avec le tag analytics**

```
<!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″>
<!– Exécution obligatoire du script AMP Analytics “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”>
<!– Structure de données JSON contenant le data layer TagCommander –> 
<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” : “”
},
<!– Appel à l’API de Commanders Act (server-side) –> 
“requests”: {
“tC_BaseURL“: “//serverside${tC_SiteID}.tagcommander.com/${tC_ContainerID}/”,
<!– Variables de page mentionnées dans l’élément “tC_PageTrack” –> 
“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}”,
<!– Variables d’événement mentionnées dans l’élément “tC_EventTrack”. Remarque : “scroll” et d’autres variables de ce type sont proposés nativement dans les pages AMP–> 
“tC_EventTrack“: “${tC_PageTrack}&scrollY=${scrollTop}&scrollX=${scrollLeft}&height=${availableScreenHeight}&width=${availableScreenWidth}&scrollBoundV=${verticalScrollBoundary}&scrollBoundH=${horizontalScrollBoundary}${eventLabel}”
},
<!– Paramètres supplémentaires mentionnés dans l’élément “extraUrlParams”. Remarque : la fonction clientId crée un ID unique par visiteur (différent des TCID habituels)–> 
“extraUrlParams”: {
“TCID_AMP”: “${clientId(TCID_AMP)}”,
“path”: “${ampdocUrl}”,
“type”: “${type|default:page}”,
“platform”: “AMP”,
“r”: “${random}”
},
<!– Exécution des hits Commanders Act sur l’élément “triggers”. “Pageview” envoie le hit à la page consultée, le trigger “clickPings” envoie le hit à un événement défini dans le “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”>Page AMP</h1>
<!– data-vars-event-label2 permet de collecter des variables supplémentaires, telles que des variables d’événement –>
<span id=”event-test” class=”tC_events” data-vars-event-label2=”22″>
Cliquez ici pour générer un événement
</span>
</body>
```

Les AMPs vous permettent également de configurer votre outil de tag management via un iframe. Veuillez noter que si l’iframe n’a pas chargé au bout de 5 secondes, il ne sera pas appelé. Vous trouverez ci-dessous un exemple de configuration via un iframe :

**Exemple de configuration avec iframe**

```
<!doctype html>
<html amp lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Commanders ACT – server-side – 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″>
<!– Exécution obligatoire du script iframe AMP “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>
<!– Appel à l’iframe TagCommander “https://academy.commandersact.com/AMP/iframe.php” contenant les variables du data layer. Remarque : l’iframe doit appartenir à un domaine différent de celui du site web (sauf si le paramètre allow-same-origin est ajouté) et être en 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″>
<!– Ajouter du contenu à l’iframe est obligatoire (un pixel dans ce cas)–>
<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”>Page AMP</h1>
<span id=”event-test” class=”tC_events” data-vars-event-label2=”22″>
Cliquez ici pour générer un événement
</span>
</body>
</html>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://doc.commandersact.com/fr/fonctionnalites/sources/sources-catalog/web/containers/setup-guides-for-developers/amp.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
