search
Platform XDocumentationWelcome to Success
githubModifier

AMP

Instructions d'installation du Web container sur AMP.

circle-info

Accelerated Mobile Pages (AMP) utilisent la version server-side de notre TMS

hashtag
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 afin 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/arrow-up-right

[EN] https://www.ampproject.org/learn/about-amp/arrow-up-right

hashtag
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 sa configuration pour qu'elle respecte les exigences d'AMP.

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

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

hashtag
Exemple de configuration avec la balise 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 réguliers)–> 
“extraUrlParams”: {
“TCID_AMP”: “${clientId(TCID_AMP)}”,
“path”: “${ampdocUrl}”,
“type”: “${type|default:page}”,
“platform”: “AMP”,
“r”: “${random}”
},
<!– Exécution des hits Commanders Act dans l'élément “triggers”. “Pageview” envoie le hit à la page vue, 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 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'a pas chargé sous 5 secondes, il ne sera pas appelé. Vous trouverez ci-dessous un exemple de configuration via un iframe :

Exemple de configuration avec iframe

PrécédentConfiguration des événements côté navigateurSuivantAngular

Mis à jour

Ce contenu vous a-t-il été utile ?