AnalyticsTracker est un utilitaire visant à faciliter le suivi des données des applications ASP.NET à Google Analytics et Google Tag Manager
L'installation d'analyticstracker est simple. Installez-le depuis NuGet pour l'ajouter à votre projet.
Dans votre modèle, ajoutez ce qui suit après le <body> pour rendre le script de suivi
@using Vertica.AnalyticsTracker
...
<body>
@AnalyticsTracker.Render("UA-xxxxxx-1")
...
</body>
<%@ Import Namespace="Vertica.AnalyticsTracker" %>
...
<body>
<%= AnalyticsTracker.Render("UA-xxxxxx-1") %>
...
</body>
Vous pouvez modifier les paramètres du tracker en utilisant les surcharges de la méthode render ().
@AnalyticsTracker.Render(
account: "UA-xxxxxx-1",
trackDefaultPageview: true,
displayFeatures: false,
trackerConfiguration: new Dictionary<string, object>
{
{"cookieDomain", "foo.example.com"},
{"cookieName", "myNewName"},
{"cookieExpires", 20000}
});
AnalyticsTracker peut également suivre les données à partir des demandes AJAX. Afin d'activer cela, ajoutez le Vertica.AnalyticsTracker.Modules.AnalyticsHttpModule à votre application. Ensuite, pour les demandes que vous souhaitez suivre, définissez l'en- true de demande HTTP AnalyticsTracker-Enabled .
La réponse inclura ensuite le code JS de suivi en tant qu'en-têtes codés Base64.
Nous avons inclus des intercepteurs AJAX pour jQuery et angular dans le fichier /Scripts/analyticstracker.adapters.js , que vous pouvez inclure dans votre site. Assurez-vous de l'inclure après les cadres.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="/Scripts/analyticstracker.adapters.js"></script>
AnalyticsTracker vise à fournir des valeurs par défaut raisonnables et vous permettez de remplacer certains des paramètres avancés si vous en avez besoin.
Si vous souhaitez suivre une URL différente pour la page de page de celle du navigateur, vous pouvez la remplacer en définissant la page du tracker actuel
AnalyticsTracker.Current.SetPage("/my/custom/url");
Par défaut, AnalyticsTracker sortira le code de suivi de base et suivra une vue de page standard. Lorsque vous souhaitez suivre des données supplémentaires, vous ajoutez commands au tracker actuel.
Ici, nous suivons un événement d'un contrôleur
public ActionResult About()
{
AnalyticsTracker.Current.Track(new EventCommand("category", "action", "label"));
ViewBag.Message = "Your application description page.";
return View();
}
La commande pour suivre une transaction de commerce électronique peut être utilisée comme ceci:
var transaction = new TransactionInfo(
id: "order1001",
affiliation: string.Empty,
revenue: 100,
shipping: 10,
tax: 5,
currency: AnalyticsCurrency.USD);
transaction.AddItem(
name: "Black shirt",
sku: "sh001",
category: "Shirts",
price: 50,
quantity: 2);
AnalyticsTracker.Current.Track(new TransactionCommand(transaction));
Si vous avez activé le suivi amélioré du commerce électronique dans votre compte, vous devez utiliser ces commandes pour suivre vos transactions:
var purchaseAction = new PurchaseActionFieldObject(
id: "order1001",
affiliation: string.Empty,
revenue: 100,
shipping: 10,
tax: 5,
coupon: null);
var lineItems = new []
{
new ProductFieldObject(
id: "sh001",
name: "Black shirt",
brand: "Northwind",
category: "Shirts",
variant: null,
price: 50,
quantity: 2,
coupon: null,
position: 1)
};
AnalyticsTracker.Current.Track(new PurchaseCommand(purchaseAction, lineItems));
Vous pouvez également définir la monnaie sur votre tracker lors du suivi du commerce électronique
Le commerce électronique amélioré vous permet également de suivre beaucoup d'autres choses. Les commandes sont situées dans le Vertica.AnalyticsTracker.Commands.EnhancedEcommerce Namespace:
AddToBasketCommand(...)
RemoveFromBasketCommand(...)
CheckoutCommand(...)
CheckoutOptionCommand(...)
ProductClickCommand(...)
ProductDetailCommand(...)
ProductListCommand(...)
Une chose typique que vous voulez faire est de vous assurer que, par exemple, les transactions ne sont suivies qu'une seule fois, même si l'utilisateur recharge la page. Vous devez suivre cela à partir de votre serveur, mais il y aura généralement le problème des utilisateurs à l'aide du bouton de retour, ou les navigateurs réhydrater une page, etc. où il n'y a pas d'interaction du serveur réel.
Entrez dans le CookieGuardedCommand :
AnalyticsTracker.Current.Track(new CookieGuardedCommand(innerCommand, "order12345"));
Envelopper votre commande dans un CookieGuardedCommand rendra la commande intérieure à l'intérieur d'une déclaration if comme ceci:
if (document.cookie.search(/AnalyticsTrackerGuardorder12345=true/) === -1) {
ga('send', {'hitType': 'event','eventCategory': 'cat','eventAction': 'act','eventLabel': ''});
document.cookie = 'AnalyticsTrackerGuardorder12345=true; Expires=' + new Date(2016, 05, 02).toUTCString();
}
Cela garantira que la commande n'est plus exécutée, si le même JavaScript est exécuté deux fois. L'utilisateur par exemple l'ID de commande comme ID de commande pour s'assurer que le cookie n'est défini que pour cette commande spécifique.
Parfois, vous avez des événements sans interaction de serveur. Par exemple, cliquez sur une image pour le zoomer. Dans ce cas, vous pouvez utiliser AnalityCStracker pour générer le script nécessaire:
<a href="#" onmousedown="@AnalyticsTracker.ClientCommand(new EventCommand("category", "action", "label"))">
<img src="..."/>
</a>
Dans votre modèle, ajoutez ce qui suit après le <body> pour rendre le script de suivi
@using Vertica.AnalyticsTracker
...
<body>
@TagManager.Render("GTM-XXYYY")
...
</body>
<%@ Import Namespace="Vertica.AnalyticsTracker" %>
...
<body>
<%= TagManager.Render("GTM-XXYYY") %>
...
</body>
Si vous avez besoin, vous pouvez rendre les parties individuelles de Google Tag Manager (script, noscript et datalayer) avec:
TagManager.RenderScript()TagManager.RenderNoScript()TagManager.RenderDataLayer()Vous pouvez modifier les paramètres de la balise en utilisant les surcharges de la méthode render ().
@TagManager.Render(account:"GTM-XXYYY", dataLayerName: "myLayer");
L'utilisation du TagManager vous permet de vous renseigner facilement à la variable dataLayer .
TagManager.Current.AddMessage(new Variable("myVariable", "myValue"));
Cela générera le datalayer suivant
<script>
var dataLayer = dataLayer || [];
dataLayer.push({'myVariable': 'myValue'});
</script>
Parfois, vous voudrez peut-être ajouter des objets plus complexes au Datalayer, et cela est pris en charge en utilisant un dictionnaire
var dict = new Dictionary<string, object>
{
{"myProp", "myValue"},
{"yourProp", 12345}
};
TagManager.Current.AddMessage(new Variable("myVariable", dict));
Le dictionnaire sera ensuite rendu comme un objet profond
<script>
var dataLayer = dataLayer || [];
dataLayer.push({'myVariable': {'myProp': 'myValue','yourProp': 12345}});
</script>
À l'aide du transactionMessage, les informations de commande peuvent être envoyées via le Datalayer:
var items = new[]
{
new TransactionItemInfo(
name: "Black shirt",
sku: "sh001",
category: "Shirts",
price: 50,
quantity: 2)
};
var message = new TransactionMessage(
transactionId: "order1001",
affiliation: string.Empty,
total: 100,
tax: 5,
shipping: 10,
items: items);
TagManager.Current.AddMessage(message);
La commande sera rendue conformément aux spécifications GTM:
<script>
var dataLayer = dataLayer || [];
dataLayer.push(
{
'transactionId': 'order1001',
'transactionAffiliation': '',
'transactionTotal': 100,
'transactionTax': 5,
'transactionShipping': 10,
'transactionProducts': [
{
'name': 'Black shirt',
'sku': 'sh001',
'category': 'Shirts',
'price': 50,
'quantity': 2
}
]
});
</script>