Emitting Custom Dimension using @piwikpro/next-piwik-pro

Data collection and tags
1

Hello and good day- thanks in advance for the assist here!

uwhealth.org is built using next.js, presenting issue w/ accurately tracking pageviews through the next/router navigation (e.g. popstate & next/link).

We’re currently implementing @piwikpro/next-piwik-pro NPM pkg (v. 1.0.4). Admin has the following config:

    1. Tag Manager → Piwik PRO tag (tracking code) → Other options → Track page views manually (ON/YES)
    1. Administration → {site name} → SPA → Track page views in a singe-page application (OFF/NO)

Effectively, we’re leaning on the Tag Manager initialization to do the initial page view, then firing off subsequent page view events via the next/router routeChangeComplete event.

We have need to send event-based Custom Dimensions on page load. Through documentation and community articles/questions, it’s recognized that using the JStracking approach, one should use setCustomDimensionValue method to set events, then emit via the trackPageView method)[API — Piwik PRO Analytics Suite 17.8 documentation].

However as noted in the aforementioned setup, we’re using the NPM pkg, and are not actually manually firing the initial page view event.

We’ve attempted using CustomEvent.trackEvent, as:

useEffect(() => {
  _tags?.forEach((tag) => {
    const { id, name } = tag;
    CustomEvent.trackEvent('Initialization', 'PiwikProContext', '_tags', 0, {
      'dimension3': encodeURIComponent(id), // `contentful-tag-id` ("name" in Piwik Pro admin)
      'dimension4': encodeURIComponent(name), // `contentful-tag-name` ("name" in Piwik Pro admin)
    });
  });
}, []);

This event emits successfully as is shown through Tracker Debugger, as the following, but w/o the CustomDimension data:

Custom event
Event category: Initialization
Event action: PiwikProContext
Event name: _tags
Event value: 0
Page URL: http://localhost:8888/locations/qa_component_guide_locations_page_test_embeds?_stg_debug=

The payload FormData for this request:

e_c: Initialization
e_a: PiwikProContext
e_n: _tags
e_v: 0
idsite: 945015fc-fb4d-467c-84f5-2de895876107
rec: 1
r: 098041
h: 12
m: 56
s: 6
url: http://localhost:8888/locations/qa_component_guide_locations_page_test_embeds?_stg_debug
_id: 9b695631d2aade68
_idts: 1692381366
_idvc: 1
_idn: 1
_viewts: 1692381366
send_image: 0
ts_n: jstc
ts_v: 2.16.2
pdf: 1
qt: 0
realp: 0
wma: 0
dir: 0
fla: 0
java: 0
gears: 0
ag: 0
cookie: 1
res: 1920x1080
gt_ms: 2674

Could you please advise on how we might be able to emit the Custom Dimension data properly via the CustomEvent.trackEvent, or if another approach is necessary?

Thanks kindly! Cheers, Christopher

2

Might anyone be able to advise whether one could take the approach of setting customDimensions to the dataLayer and then having the (npm pkg) PageViews.trackPageView() method pick them up when it fires?

The following snippet is an attempt, where _contentTypeId & title are strings & _tags is an array (e.g. "_tags":[{"id":"serviceAreaAbout","name":"Service Area: About"}]) - alas, the customDimensions are coming through in reports thus far:

const router = useRouter();
const { PageViews } = usePiwikPro();
const hasWindow = typeof window !== 'undefined';
const _paq = hasWindow && window._paq || [];

// Pageview event
// Sets `_contentTypeId` customDimension.
// Fires on router changes (popstate & next/link), **not initial page view**.
// (Initial page view event is handled by Piwik Pro Tag Manager init.)
const trackPageView = useCallback(() => {
  if (hasWindow) {
    _paq.push(['setCustomDimensionValue', 5, _contentTypeId]); // contentful-_contentTypeId
    PageViews.trackPageView(title);
  }
});
useEffect(() => {
  router.events.on('routeChangeComplete', trackPageView);
  return () => router.events.off('routeChangeComplete', trackPageView);
}, [router]);

// Set Contentful "Tags" customDimensions.
// Fires on page ready and on router changes.
const trackTags = useCallback(() => {
  if (hasWindow) {
    _tags?.forEach((tag) => {
      const { id, name } = tag;
      _paq.push(['setCustomDimensionValue', 3, id]); // contentful-tag-id
      _paq.push(['setCustomDimensionValue', 4, name]); // contentful-tag-name
    });
  }
}, [_tags]);
useEffect(() => {
  trackTags();
  router.events.on('routeChangeComplete', trackTags);
  return () => router.events.off('routeChangeComplete', trackTags);
}, []);
3

Hi @ctheagen! Let me start with an apology - you’ve been waiting for our response for quite some time :frowning: Thankfully, the holiday season is now over and we have all hands on deck. We took a task to look into all next-related issues this sprint. We’ll keep you informed on the progress. Stay tuned!