AnalyticsTrackerのダウンロードAnalyticsTrackerソースコードのダウンロード

AnalyticsTrackerへようこそ

AnalyticsTrackerは、ASP.NETアプリケーションからGoogle AnalyticsおよびGoogle Tag Managerへのデータを簡単に追跡できるようにすることを目的としたユーティリティです。

Googleアナリティクス
Googleタグマネージャー

インストール

AnalyticStrackerのインストールは簡単です。 Nugetからインストールして、プロジェクトに追加します。

Googleアナリティクス

テンプレートで、 <body>の後に次のように追加して追跡スクリプトをレンダリングします

MVC

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

ウェブフォーム

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

高度なトラッカー設定

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

AnalyticsTrackerは、AJAXリクエストのデータを追跡することもできます。これをアクティブにするには、 Vertica.AnalyticsTracker.Modules.AnalyticsHttpModuleをアプリケーションに追加します。次に、追跡するリクエストについては、 AnalyticsTracker-Enabled HTTPリクエストヘッダーをtrueに設定します。

応答には、base64エンコードヘッダーとしての追跡JSコードが含まれます。

ファイル/Scripts/analyticstracker.adapters.jsにjQueryとangularのajaxインターセプターを含め、サイトに含めることができます。フレームワークの後にそれを含めるようにしてください。

 <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は、SOM Sensible Defaultsを提供することを目指しており、必要に応じていくつかの高度な設定をオーバーライドできます。

URLをオーバーライドします

PageViewの別のURLをブラウザのURLと追跡する場合は、現在のトラッカーのページを設定してオーバーライドできます。

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

コマンド

デフォルトでは、AnalyticsTrackerは基本的な追跡コードを出力し、標準のPageViewを追跡します。追加データを追跡する場合は、現在のトラッカーにcommandsを追加します。

ここでは、コントローラーからイベントを追跡しています

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

eコマース追跡

eコマーストランザクションを追跡するコマンドは、次のように使用できます。

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

強化されたeコマース追跡

アカウントで強化されたeコマーストラッキングを有効にしている場合は、これらのコマンドを使用してトランザクションを追跡する必要があります。

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

また、eコマースを追跡するときにトラッカーに通貨を設定することもできます

強化されたeコマースでは、他の多くのことを追跡することもできます。コマンドはVertica.AnalyticsTracker.Commands.EnhancedEcommerceの名前空間にあります：

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

一度だけ追跡します

ユーザーがページをリロードしても、たとえばトランザクションが一度しか追跡されないことを確認することです。サーバーからこれを追跡する必要がありますが、通常、バックボタンを使用しているユーザーの問題、または実際のサーバーインタラクションがないページなどのブラウザなどの問題もあります。

CookieGuardedCommandを入力してください：

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

CookieGuardedCommandでコマンドを包むと、このようなifステートメント内に内側のコマンドが表示されます。

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

これにより、同じJavaScriptが2回実行される場合、コマンドが再度実行されないようになります。たとえば、Cookieがその特定の注文のみに設定されていることを確認するためのコマンドIDとしての注文ID。

クライアントサイドトラッキング

サーバーの相互作用なしにイベントが発生する場合があります。たとえば、画像をクリックしてズームします。この場合、AnalityCStrackerを使用して、必要なスクリプトを生成できます。

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

Googleタグマネージャー

テンプレートで、 <body>の後に次のように追加して追跡スクリプトをレンダリングします

MVC

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

ウェブフォーム

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

個々の部品のレンダリング

必要に応じて、Google Tag Managerの個々の部分（Script、Noscript、Datalayer）を次のようにレンダリングできます。

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

高度なトラッカー設定

render（）メソッドの過負荷を使用して、タグの設定を微調整できます。

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

使用法

Tagmanagerを使用すると、 dataLayer変数に簡単に情報を提供できます。

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

これにより、次のデータレイヤーが生成されます

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

複雑な変数

Datalayerに複雑なオブジェクトを追加することをお勧めします。これは辞書を使用することでサポートされています。

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

その後、辞書は深いオブジェクトとしてレンダリングされます

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

eコマースオーダートラッキング

TransactionMessageを使用して、注文情報は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);

注文は、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>

拡大する