Página Inicial>Código fonte ASP>Outras categorias
Baixar

Bem -vindo ao AnalyticsTracker

AnalyticsTracker é um utilitário destinado a facilitar o rastreamento de dados do ASP.NET APLICAÇÕES para o Google Analytics e o Google Tag Manager

  • Google Analytics
  • Google Tag Manager

Instalação

A instalação do AnalticsTracker é simples. Instale -o da NUGET para adicioná -lo ao seu projeto.

Google Analytics

No seu modelo, adicione o seguinte após o <body> para renderizar o script de rastreamento

MVC 

 @using Vertica.AnalyticsTracker
...
<body>
	@AnalyticsTracker.Render("UA-xxxxxx-1")
	...
</body>

WebForms 

 <%@ Import Namespace="Vertica.AnalyticsTracker" %>
...
<body>
	<%= AnalyticsTracker.Render("UA-xxxxxx-1") %>
	...
</body>

Configurações avançadas do rastreador

Você pode ajustar as configurações do rastreador usando as sobrecargas do método render (). 

 @AnalyticsTracker.Render(
	account: "UA-xxxxxx-1",
	trackDefaultPageview: true,
	displayFeatures: false,
	trackerConfiguration: new Dictionary<string, object>
	{
		{"cookieDomain", "foo.example.com"},
		{"cookieName", "myNewName"},
		{"cookieExpires", 20000}
	});

Ajax

O AnalyticsTracker também pode rastrear dados do AJAX Solictações. Para ativar isso, adicione o Vertica.AnalyticsTracker.Modules.AnalyticsHttpModule ao seu aplicativo. Em seguida, para solicitações que você deseja rastrear, defina o cabeçalho da solicitação HTTP AnalyticsTracker-Enabled como true .

A resposta incluirá o código JS de rastreamento como cabeçalhos codificados Base64.

Incluímos interceptores AJAX para jQuery e angular no arquivo /Scripts/analyticstracker.adapters.js , que você pode incluir no seu site. Certifique -se de incluí -lo após as estruturas. 

 <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>

Uso

O AnalyticsTracker pretende fornecer padrões sensíveis ao SOM e permitir que você substitua algumas das configurações avançadas, se necessário.

Substituir URL

Se você deseja rastrear um URL diferente para a visualização de página do que no navegador, você pode substituí -lo definindo a página do rastreador atual 

 AnalyticsTracker.Current.SetPage("/my/custom/url");

Comandos

Por padrão, o AnalyticsTracker produzirá o código de rastreamento básico e rastreará uma visão de página padrão. Quando você deseja rastrear dados adicionais, adiciona commands ao rastreador atual.

Aqui estamos rastreando um evento de um controlador 

 public ActionResult About()
{
	AnalyticsTracker.Current.Track(new EventCommand("category", "action", "label"));
	ViewBag.Message = "Your application description page.";
	return View();
}

Rastreamento de comércio eletrônico

O comando para rastrear uma transação de comércio eletrônico pode ser usado assim: 

 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));

Rastreamento aprimorado de comércio eletrônico

Se você ativou o rastreamento aprimorado de comércio eletrônico em sua conta, use esses comandos para rastrear suas transações: 

 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));

Você também pode querer definir a moeda em seu rastreador ao rastrear o comércio eletrônico

O comércio eletrônico aprimorado também permite rastrear muitas outras coisas. Os comandos estão localizados na Vertica.AnalyticsTracker.Commands.EnhancedEcommerce namespace: 

 AddToBasketCommand(...)
RemoveFromBasketCommand(...)
CheckoutCommand(...)
CheckoutOptionCommand(...)
ProductClickCommand(...)
ProductDetailCommand(...)
ProductListCommand(...)

Rastrear apenas uma vez

Uma coisa típica que você deseja fazer é garantir que, por exemplo, as transações sejam rastreadas apenas uma vez, mesmo que o usuário recarregue a página. Você deve acompanhar isso no seu servidor, mas normalmente também haverá o problema dos usuários usando o botão de volta ou os navegadores reidratando uma página etc. onde não há interação real do servidor.

Entre no CookieGuardedCommand : 

 AnalyticsTracker.Current.Track(new CookieGuardedCommand(innerCommand, "order12345"));

Envolvendo seu comando em um CookieGuardedCommand renderizará o comando interno dentro de uma instrução if como esta: 

 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();
}

Isso garantirá que o comando não seja executado novamente, se o mesmo JavaScript for executado duas vezes. Usuário, por exemplo, o ID do pedido como ID de comando para garantir que o cookie esteja definido apenas para esse pedido específico.

Rastreamento lateral do cliente

Às vezes, você tem eventos acontecendo sem nenhuma interação do servidor. Por exemplo, clicando em uma imagem para ampliá -la. Nesse caso, você pode usar o AnalityCStracker para gerar o script necessário: 

 <a href="#" onmousedown="@AnalyticsTracker.ClientCommand(new EventCommand("category", "action", "label"))">
	<img src="..."/>
</a>

Google Tag Manager

No seu modelo, adicione o seguinte após o <body> para renderizar o script de rastreamento

MVC 

 @using Vertica.AnalyticsTracker
...
<body>
	@TagManager.Render("GTM-XXYYY")
	...
</body>

WebForms 

 <%@ Import Namespace="Vertica.AnalyticsTracker" %>
...
<body>
	<%= TagManager.Render("GTM-XXYYY") %>
	...
</body>

Renderizar partes individuais

Se necessário, você pode renderizar as partes individuais do Google Tag Manager (Script, Noscript e Datalayer) com:

  • TagManager.RenderScript()
  • TagManager.RenderNoScript()
  • TagManager.RenderDataLayer()

Configurações avançadas do rastreador

Você pode ajustar as configurações da tag usando as sobrecargas do método render (). 

 @TagManager.Render(account:"GTM-XXYYY", dataLayerName: "myLayer");

Uso

O uso do TagManager permite que você informe facilmente na variável dataLayer . 

 TagManager.Current.AddMessage(new Variable("myVariable", "myValue"));

Isso irá gerar o seguinte datalayer 

 <script>
var dataLayer = dataLayer || [];
dataLayer.push({'myVariable': 'myValue'});
</script>

Variáveis ​​complexas

Às vezes, você pode querer adicionar objetos mais complexos ao Datayer, e isso é suportado usando um dicionário 

 var dict = new Dictionary<string, object>
{
	{"myProp", "myValue"},
	{"yourProp", 12345}
};
TagManager.Current.AddMessage(new Variable("myVariable", dict));

O dicionário será então renderizado como um objeto profundo 

 <script>
var dataLayer = dataLayer || [];
dataLayer.push({'myVariable': {'myProp': 'myValue','yourProp': 12345}});
</script>

Rastreamento de pedidos de comércio eletrônico

Usando o transactionMessage, as informações do pedido podem ser enviadas através do 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);

O pedido será renderizado de acordo com as especificações do 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>
Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos