Tracker Google Analytics dans modèle Topaze


#1

Comment ajouter un code de tracking (Google Analytics, Piwik ou autre) dans un modèle Topaze ?

Ce code serait rentré par l’utilisateur, idéalement dans le fichier .case.


#2

Pour avoir un code Google Analytics universel (de forme UA-XXXXXXXX-X) sur toutes les pages, qui n’est pas activé en local (pour ne pas polluer la propriété avec des données de développement), voici un tutoriel pour ajouter un champ dans le .case, à faire dans la dérivation de votre modèle Topaze (cette démarche est adaptable pour Opale également, remplacer juste les xpath et les modèles roots utilisés).


Etape 1 : Ajout du champ méta dans le modèle root

caseM.model

    <sm:field code="codeAnalytics" name=";Code Google Analytics" occurrence="zeroOrOne" family="property">
		<sm:help quickHelp=";Ajoutez un code de tracking sur toutes les pages de votre ressource (Identifiant de suivi, de forme UA-**********-*)"/>
		<sm:string/>
	</sm:field>

Etape 2 : Créer un transf (de type compositionXhtmlTransf) sur l’axis @codeAnalytics.

On utilise les xpath opa:caseM/sp:codeAnalytics, qui permet de récupérer la valeur du champ codeAnalytics déclaré dans caseM.model.
A noter : le script d’analytics ne sera inclus que s’il est renseigné ; de plus, on bloque l’appel au tracker si on est en local (souvent 127.0.0.1, mais peut-être localhost, ou un nom de domaine en .local dans mon cas)

case@codeAnalytics.transf

<sm:compositionXhtmlTransf xmlns:sc="http://www.utc.fr/ics/scenari/v3/core" xmlns:sm="http://www.utc.fr/ics/scenari/v3/modeling">
	<sm:model sc:refUri="/case/model/case.model"/>
	<sm:axis code="codeAnalytics"/>
	<sm:content format="xhtml">
		<sm:choose>
			<sm:when xpath="opa:caseM/sp:codeAnalytics!=''">
				<!--<comment xmlns="scenari.eu:comment:1.0" type="thread"><comment creationTime="1551288814451" updateTime="1554284594122">Inclusion du script s'il y a un code de tracking renseigné</comment></comment>-->
				<sm:WFreeBlock>
					<script xmlns="http://www.w3.org/1999/xhtml">
						<addAttribute name="async"></addAttribute>
						<addAttribute name="src">https://www.googletagmanager.com/gtag/js?id=<sm:dynamicString>
								<sm:freeSelect xpath="opa:caseM/sp:codeAnalytics"/>
							</sm:dynamicString></addAttribute>
					</script>
				</sm:WFreeBlock>
			</sm:when>
		</sm:choose>
	</sm:content>
</sm:compositionXhtmlTransf>

Etape 3 : Rajouter le transf à case.transflist

Etape 4 : Utiliser ce code dans les templates voulus

L’exemple le plus commun serait dans topaze.uitemplate, pour l’inclure dans toutes les pages (sauf la page d’accueil). Ajouter le code suivant à la fin du

topaze.uitemplate

	<sm:callRootModel axis="codeAnalytics"/>

Note : c’est un poste de wiki, pour que d’autres utilisateurs puissent en profiter. Si vous avez des remarques, questions ou suggestions, n’hésitez pas !