Page and view tracking with React/Adobe

[ElliotSi]

I just to want to confirm if my current implementation is correct and gives accurate time metrics. In my React app on login, I use Adobe to track the user's id. Then for each of my page components, I add this code snippet and collect it into a dimension:

window._satellite.track('page-name', {

  pageName: name,

});

Therefore, to track subview (child) components:
- Can I use the same snippet as above or will it interfere with overall page tracking? Would it be a better idea to create a new event/dimension called "Component Name"?
- I am slightly confused on the time metrics documentation. If I have Page1 and Page2, it tracks time spent from when user triggers Page1 event to triggers Page2 event? Therefore, if I were to also use "Page Name" for the subview components inside pages, it will throw off the time metrics?

[Jennifer_Dungan]

Hi,

Then for each of my page components, I add this code snippet and collect it into a dimension

---

You are firing a tracking call for every component on your site? 

_satellite.track triggers a "direct call" event type, meaning you are either triggering multiple page views or multiple actions on each page... if the first, page views, this will massively inflate your PVs metric, and if actions, you will still be inflating server calls and costs, and breaking correlations... 

You really should probably be using Data Elements to set up all the dimension values you want to track, and have a single page view tracking event passing all the values.  (assuming I am reading what you posted correctly)

If your React is an SPA, you will have to find an appropriate trigger, either something like History Change, or maybe have your developers trigger an event when the "content is fully loaded" so you know when its safe to proceed with tracking.

[ElliotSi]

Hi,

Let me clarify. The React app is SPA, and it triggers the page tracking event on each page level component (<10) first time rendering. There is only 1 dimension/eVar 'Page Name' (and 1 Data Element to store page name). Time metrics are then collected based on difference between dimension hits https://experienceleague.adobe.com/en/docs/analytics/components/metrics/average-time-on-site

My goal is to increase this to subview components on a page (i.e. tracking when a visitor opens a tab and viewing a report under it). I assume this would mean creating a new dimension, etc. and could cause scaling issues.

Thanks for the help!

[Jennifer_Dungan]

I suppose it depends on the "tab"

I've worked with both traditional and SPA sites, and even in the traditional sites I've had pages with tabs... 

Sometimes those tabs constitute only change the content of a small block, or basically changing most of the content on the "page"... Those are where you have to make a decision, do you track the "changing of tabs" as a whole new page view (this is more when the majority of content changes) or as a click / action that tracks that the users changed to tab x or tab y.

Now, if your implementation is that simple, and you track the "page name", if the tab essentially changes all the content of the page, you could just track this as a new page view, with a new page name (i.e. main page is "home", and the tab could be "home|tab x" or just "tab x").

If it's a small component, you do have the "click name" as part of the click action... you could have a new dimension, or just us the click name.

Example:

clickName = "click tab"

prop2 = "tab x"

OR

clickName = "click tab: tab x"

It really depends on how you want to see / use the data in your reporting. 

I would not however create a new dimension for each tab.... you would make a dimension like "prop2" or "eVar5" (hit expiry) and call it something like "tab viewed" or "tab clicked", etc..

Then each tab would have its own value, all passed into your dimension... 

If you have multiple tab blocks on the page, you could use a second dimension to identify which tab block is in use.

prop2 (Tab) = "tab x"

prop3 (Tab Block) = "block 1"

So it's not really a scaling issue.. it's two dimensions that you can correlate:

				Tab Clicks (event1)
Tab Block				10
	block 1			6
		Tab		6
			tab x	4
			tab y	2
	block 2			4
		Tab		4
			tab z	4

So you can see in this simple example, by using 2 dimensions I can get a lot of information about each use... and if I only care about block 2, I can create a segment, and only pull in the Tab dimension to make a cleaner table.