Download AnalyticsTracker - AnalyticsTracker ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

ยินดีต้อนรับสู่ AnalyticStracker

AnalyticStracker เป็นยูทิลิตี้ที่มีจุดประสงค์เพื่อให้ง่ายต่อการติดตามข้อมูลจากแอปพลิเคชัน ASP.NET ไปยัง Google Analytics และ Google Tag Manager

Google Analytics
Google Tag Manager

การติดตั้ง

การติดตั้ง AnalyticStracker นั้นง่าย ติดตั้งจาก NuGet เพื่อเพิ่มลงในโครงการของคุณ

Google Analytics

ในเทมเพลตของคุณเพิ่มสิ่งต่อไปนี้หลังจาก <body> เพื่อแสดงผลสคริปต์การติดตาม

MVC

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

เว็บฟอร์ม

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

การตั้งค่าตัวติดตามขั้นสูง

คุณสามารถปรับแต่งการตั้งค่าของตัวติดตามโดยใช้วิธีการ overloads ของวิธีการเรนเดอร์ ()

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

อาแจ็กซ์

AnalyticStracker ยังสามารถติดตามข้อมูลจากคำขอ AJAX ในการเปิดใช้งานสิ่งนี้ให้เพิ่ม Vertica.AnalyticsTracker.Modules.AnalyticsHttpModule ลงในแอปพลิเคชันของคุณ จากนั้นสำหรับคำขอที่คุณต้องการติดตามตั้งค่าส่วนหัวคำขอ HTTP AnalyticsTracker-Enabled เป็น true

การตอบสนองจะรวมถึงรหัสการติดตาม JS เป็นส่วนหัวที่เข้ารหัส Base64

เราได้รวม Ajax interceptors สำหรับ jQuery และ angular ในไฟล์ /Scripts/analyticstracker.adapters.js ที่คุณสามารถรวมไว้ในไซต์ของคุณ ตรวจสอบให้แน่ใจว่าได้รวมไว้หลังจากเฟรมเวิร์ก

 <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 มีจุดมุ่งหมายเพื่อให้ค่าเริ่มต้นที่สมเหตุสมผลและให้คุณแทนที่การตั้งค่าขั้นสูงบางอย่างหากคุณต้องการ

แทนที่ URL

หากคุณต้องการติดตาม URL ที่แตกต่างกันสำหรับการดูหน้าเว็บมากกว่าที่อยู่ในเบราว์เซอร์คุณสามารถแทนที่ได้โดยการตั้งค่าหน้าของตัวติดตามปัจจุบัน

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

คำสั่ง

โดยค่าเริ่มต้น AnalyticStracker จะส่งออกรหัสการติดตามพื้นฐานและติดตามการชมหน้าเว็บมาตรฐาน เมื่อคุณต้องการติดตามข้อมูลเพิ่มเติมคุณจะเพิ่ม commands ในตัวติดตามปัจจุบัน

ที่นี่เรากำลังติดตามเหตุการณ์จากคอนโทรลเลอร์

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

การติดตามอีคอมเมิร์ซ

คำสั่งในการติดตามธุรกรรมอีคอมเมิร์ซสามารถใช้เช่นนี้:

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

การติดตามอีคอมเมิร์ซที่ได้รับการปรับปรุง

หากคุณเปิดใช้งานการติดตามอีคอมเมิร์ซขั้นสูงในบัญชีของคุณคุณควรใช้คำสั่งเหล่านั้นเพื่อติดตามธุรกรรมของคุณ:

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

คุณอาจต้องการตั้งค่าสกุลเงินบนตัวติดตามของคุณเมื่อติดตามอีคอมเมิร์ซ

อีคอมเมิร์ซที่ปรับปรุงแล้วยังช่วยให้คุณติดตามสิ่งอื่น ๆ มากมาย คำสั่งตั้งอยู่ใน Vertica.AnalyticsTracker.Commands.EnhancedEcommerce Commommerce Namespace:

 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 เดียวกันถูกดำเนินการสองครั้ง ผู้ใช้ตัวอย่างเช่นรหัสคำสั่งซื้อเป็นรหัสคำสั่งเพื่อให้แน่ใจว่าคุกกี้ถูกตั้งค่าเฉพาะสำหรับคำสั่งซื้อเฉพาะนั้น

การติดตามด้านลูกค้า

บางครั้งคุณมีเหตุการณ์เกิดขึ้นโดยไม่มีการโต้ตอบกับเซิร์ฟเวอร์ ตัวอย่างเช่นคลิกที่ภาพเพื่อซูม ในกรณีนี้คุณสามารถใช้ AnalityCstracker เพื่อสร้างสคริปต์ที่จำเป็น:

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

Google Tag Manager

MVC

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

เว็บฟอร์ม

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

การแสดงผลแต่ละส่วน

หากจำเป็นคุณสามารถแสดงผลแต่ละส่วนของ Google Tag Manager (สคริปต์, noscript และ datalayer) ด้วย:

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

การตั้งค่าตัวติดตามขั้นสูง

คุณสามารถปรับแต่งการตั้งค่าของแท็กโดยใช้วิธีการ overloads ของวิธีการเรนเดอร์ ()

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

การใช้งาน

การใช้ TagManager ช่วยให้คุณสามารถข้อมูลไปยังตัวแปร dataLayer ได้อย่างง่ายดาย

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

สิ่งนี้จะสร้าง datalayer ต่อไปนี้

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

การติดตามคำสั่งซื้ออีคอมเมิร์ซ

การใช้ 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>

ขยาย