AMP
Instructions d'installation du conteneur Web sur AMP.
Définition 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 la création de contenus mobiles optimisés dans le but d'améliorer l'expérience utilisateur.
Si vous souhaitez en savoir plus sur les AMP, cliquez sur les liens suivants :
[FR] https://www.ampproject.org/fr/learn/about-amp/
[EN] https://www.ampproject.org/learn/about-amp/
Implémentation de Commanders Act sur les AMP
AMP bloque les fichiers JavaScript synchrones appelés sur vos sites afin d'augmenter la vitesse de chargement des pages mobiles. Pour que votre container Commanders Act soit compatible, vous devez adapter la façon dont vous le configurez afin d'être conforme aux exigences d'AMP.
Ci-dessous, vous trouverez un exemple montrant comment configurer un container 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 container.
Important: Cette opération fait appel à l'API de Commanders Act et nécessite donc la mise en place d'un container server-side 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 similaires sont proposées nativement dans les pages AMP–>
“tC_EventTrack“: “${tC_PageTrack}&scrollY=${scrollTop}&scrollX=${scrollLeft}&height=${availableScreenHeight}&width=${availableScreenWidth}&scrollBoundV=${verticalScrollBoundary}&scrollBoundH=${horizontalScrollBoundary}${eventLabel}”
},
<!– Paramètres additionnels mentionnés dans l’élément “extraUrlParams”. Remarque : la fonction clientId crée un ID unique par visiteur (différent des TCIDs 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 pour la page vue, le trigger “clickPings” envoie le hit pour 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 additionnelles, 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 AMP vous permettent également de configurer votre tag management tool via un iframe. Veuillez noter que si l'iframe n'est pas chargé dans les 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 – 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″>
<!– Exécution obligatoire du script AMP iframe “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 (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″>
<!– L'ajout de contenu dans 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>Mis à jour
Ce contenu vous a-t-il été utile ?