Piwik PRO Library for Gatsby

Dedicated Piwik PRO library that helps with implementing Piwik PRO Tag Manager and the Piwik PRO tracking client in Gatsby applications.

Installation

To use this package in your project, run the following command.

npm

npm install @piwikpro/gatsby-plugin-piwik-pro

Yarn

yarn add @piwikpro/gatsby-plugin-piwik-pro

Basic setup

In your Gatsby Project, edit main configuration file called gatsby-config.js (gatsby-config.ts if you are using TypeScript).

In the arguments, pass your container URL and your container id as parameters (marked containerUrl and containerId in the example below).

You can disable plugin setting parameter pluginEnabled as false.

If you want to use nonce, you need to pass it as parameter nonceString.

gatsby-config.js

plugins: [
  {
    resolve: '@piwikpro/gatsby-plugin-piwik-pro',
    options: {
      pluginEnabled: true,
      containerUrl: 'https://example.containers.piwik.pro/',
      containerId: 'dc0f2c80-79d8-456a-9c77-6d48d6f867dd',
      nonceString: '', // not required
      dataLayerName: 'myDataLayer', // custom Data Layer name, not required
    },
  },
]

Track page views

To track all page view you need to create or edit gatsby-browser.js or gatsby-browser.ts file, and add onRouteUpdate function like on example below.

import { PageViews } from '@piwikpro/gatsby-plugin-piwik-pro'

const onRouteUpdate = () => {
  if (`requestAnimationFrame` in window) {
    requestAnimationFrame(() => {
      requestAnimationFrame(() =>
        setTimeout(() => PageViews.trackPageView(), 0)
      )
    })
  } else {
    setTimeout(() => PageViews.trackPageView(), 32)
  }
}

export { onRouteUpdate }

Example Usage

To use methods in your page you need to import them from the library like on example.

import { PageViews, DataLayer } from '@piwikpro/gatsby-plugin-piwik-pro'

You can use those methods in all hooks and props for ex. useEffect or onClick.

useEffect

useEffect(() => {
  PageViews.trackPageView('optional title')
}, [])

onClick

<button
  onClick={() => {
    CustomEvent.trackEvent('Post', pageData.title)
  }}
>
  CustomEvent.trackEvent button
</button>

Table of contents

Namespaces

• ContentTracking
• CookieManagement
• CustomDimensions
• CustomEvent
• DataLayer
• DownloadAndOutlink
• ErrorTracking
• GoalConversions
• PageViews
• SiteSearch
• UserManagement
• eCommerce

Type Aliases

• Dimensions
• InitOptions
• PaymentInformation
• Product
• VisitorInfo

Variables

• default

Type Aliases

Dimensions

Ƭ Dimensions: Record<`dimension${number}`, string>

InitOptions

Ƭ InitOptions: Object

Type declaration

PaymentInformation

Ƭ PaymentInformation: Object

Type declaration

Product

Ƭ Product: Object

Type declaration

VisitorInfo

Ƭ VisitorInfo: [isNew: “0” | “1”, visitorId: string, firstVisitTS: number, previousVisitCount: string | number, currentVisitTS: number, lastVisitTS: number | "", lastEcommerceOrderTS: number | ""]

Variables

default

• Const default: Object

Type declaration

ContentTracking

Table of contents

• logAllContentBlocksOnPage
• trackAllContentImpressions
• trackContentImpression
• trackContentImpressionsWithinNode
• trackContentInteraction
• trackContentInteractionNode
• trackVisibleContentImpressions

logAllContentBlocksOnPage

▸ logAllContentBlocksOnPage(): void

Print all content blocks to the console for debugging purposes

Returns

void

trackAllContentImpressions

▸ trackAllContentImpressions(): void

Scans the entire DOM for content blocks and tracks impressions after all page elements load. It does not send duplicates on repeated calls unless trackPageView was called in between trackAllContentImpressions invocations

Returns

void

trackContentImpression

▸ trackContentImpression(contentName, contentPiece, contentTarget): void

Parameters

Returns

void

trackContentImpressionsWithinNode

▸ trackContentImpressionsWithinNode(domNode): void

Parameters

Returns

void

trackContentInteraction

▸ trackContentInteraction(contentInteraction, contentName, contentPiece, contentTarget): void

Tracks manual content interaction event

Parameters

Returns

void

trackContentInteractionNode

▸ trackContentInteractionNode(domNode, contentInteraction?): void

Tracks interaction with a block in domNode. Can be called from code placed in onclick attribute

Parameters

Returns

void

trackVisibleContentImpressions

▸ trackVisibleContentImpressions(checkOnScroll?, watchInterval?): void

Scans DOM for all visible content blocks and tracks impressions

Parameters

Returns

void

CookieManagement

Table of contents

• deleteCookies
• disableCookies
• enableCookies
• getConfigVisitorCookieTimeout
• getCookieDomain
• getCookiePath
• getSessionCookieTimeout
• hasCookies
• setCookieDomain
• setCookieNamePrefix
• setCookiePath
• setReferralCookieTimeout
• setSecureCookie
• setSessionCookieTimeout
• setVisitorCookieTimeout
• setVisitorIdCookie

deleteCookies

▸ deleteCookies(): void

Deletes existing tracking cookies on the next page view

Returns

void

disableCookies

▸ disableCookies(): void

Disables all first party cookies. Existing cookies will be deleted in the next page view

Returns

void

enableCookies

▸ enableCookies(): void

Enables all first party cookies. Cookies will be created on the next tracking request

Returns

void

getConfigVisitorCookieTimeout

▸ getConfigVisitorCookieTimeout(): Promise<number>

Returns expiration time of visitor cookies (in milliseconds)

Returns

Promise<number>

getCookieDomain

▸ getCookieDomain(): Promise<string>

Returns domain of the analytics tracking cookies (set with setCookieDomain()).

Returns

Promise<string>

getCookiePath

▸ getCookiePath(): Promise<string>

Returns the analytics tracking cookies path

Returns

Promise<string>

getSessionCookieTimeout

▸ getSessionCookieTimeout(): Promise<number>

Returns expiration time of session cookies

Returns

Promise<number>

hasCookies

▸ hasCookies(): Promise<boolean>

Returns true if cookies are enabled in this browser

Returns

Promise<boolean>

setCookieDomain

▸ setCookieDomain(domain): void

Sets the domain for the analytics tracking cookies

Parameters

Returns

void

setCookieNamePrefix

▸ setCookieNamePrefix(prefix): void

Sets the prefix for analytics tracking cookies. Default is ”pk“.

Parameters

Returns

void

setCookiePath

▸ setCookiePath(path): void

Sets the analytics tracking cookies path

Parameters

Returns

void

setReferralCookieTimeout

▸ setReferralCookieTimeout(seconds): void

Sets the expiration time of referral cookies

Parameters

Returns

void

setSecureCookie

▸ setSecureCookie(secure): void

Toggles the secure cookie flag on all first party cookies (if you are using HTTPS)

Parameters

Returns

void

setSessionCookieTimeout

▸ setSessionCookieTimeout(seconds): void

Sets the expiration time of session cookies

Parameters

Returns

void

setVisitorCookieTimeout

▸ setVisitorCookieTimeout(seconds): void

Sets the expiration time of visitor cookies

Parameters

Returns

void

setVisitorIdCookie

▸ setVisitorIdCookie(): void

Sets cookie containing analytics ID in browser

Returns

void

CustomDimensions

Table of contents

• deleteCustomDimension
• getCustomDimensionValue
• setCustomDimensionValue

deleteCustomDimension

▸ deleteCustomDimension(customDimensionId): void

Removes a custom dimension with the specified ID.

Parameters

Returns

void

getCustomDimensionValue

▸ getCustomDimensionValue(customDimensionId): Promise<string | undefined>

Returns the value of a custom dimension with the specified ID.

Parameters

Returns

Promise<string | undefined>

setCustomDimensionValue

▸ setCustomDimensionValue(customDimensionId, customDimensionValue): void

Sets a custom dimension value to be used later.

Parameters

Returns

void

CustomEvent

Table of contents

• trackEvent

trackEvent

▸ trackEvent(category, action, name?, value?, dimensions?): void

Tracks a custom event, e.g. when a visitor interacts with the page

Parameters

Returns

void

DataLayer

Table of contents

Type Aliases

• DataLayerEntry

• push

• setDataLayerName

Type Aliases

DataLayerEntry

Ƭ DataLayerEntry: Record<string, AnyData>

push

▸ push(data): number

Adds entry to a data layer

Parameters

Returns

number

setDataLayerName

▸ setDataLayerName(name): void

Parameters

Returns

void

DownloadAndOutlink

Table of contents

• addDownloadExtensions
• enableLinkTracking
• getLinkTrackingTimer
• removeDownloadExtensions
• setDownloadClasses
• setDownloadExtensions
• setIgnoreClasses
• setLinkClasses
• setLinkTrackingTimer
• trackLink

addDownloadExtensions

▸ addDownloadExtensions(extensions): void

Adds new extensions to the download extensions list

Parameters

Returns

void

enableLinkTracking

▸ enableLinkTracking(trackAlsoMiddleAndRightClicks?): void

Enables automatic link tracking. If called with true, left, right and middle clicks on links will be treated as opening a link. Opening a links to an external site (different domain) creates an outlink event. Opening a link to a downloadable file creates a download event

Parameters

Returns

void

getLinkTrackingTimer

▸ getLinkTrackingTimer(): Promise<number>

Returns lock/wait time after a request set by setLinkTrackingTimer

Returns

Promise<number>

removeDownloadExtensions

▸ removeDownloadExtensions(extensions): void

Removes extensions from the download extensions list

Parameters

Returns

void

setDownloadClasses

▸ setDownloadClasses(classes): void

Sets a list of class names that indicate whether a list is a download and not an outlink

Parameters

Returns

void

setDownloadExtensions

▸ setDownloadExtensions(extensions): void

Overwrites the list of file extensions indicating that a link is a download

Parameters

Returns

void

setIgnoreClasses

▸ setIgnoreClasses(classes): void

Set a list of class names that indicate a link should not be tracked

Parameters

Returns

void

setLinkClasses

▸ setLinkClasses(classes): void

Sets a list of class names that indicate whether a link is an outlink and not download

Parameters

Returns

void

setLinkTrackingTimer

▸ setLinkTrackingTimer(time): void

When a visitor produces an events and closes the page immediately afterwards, e.g. when opening a link, the request might get cancelled. To avoid loosing the last event this way, JavaScript Tracking Client will lock the page for a fraction of a second (if wait time hasn’t passed), giving the request time to reach the Collecting & Processing Pipeline

Parameters

Returns

void

trackLink

▸ trackLink(url, linkType, dimensions?, callback?): void

Manually tracks outlink or download event with provided values

Parameters

Returns

void

ErrorTracking

Table of contents

• enableJSErrorTracking
• trackError

enableJSErrorTracking

▸ enableJSErrorTracking(unique?): void

Enables tracking of unhandled JavaScript errors.

Parameters

Returns

void

trackError

▸ trackError(error): void

Attempts to send error tracking request using same format as native errors caught by enableJSErrorTracking(). Such error request will still follow rules set for tracker, so it will be sent only when JS error tracking is enabled (enableJSErrorTracking function was called before this attempt). It will also respect rules for tracking only unique errors.

Parameters

Returns

void

GoalConversions

Table of contents

• trackGoal

trackGoal

▸ trackGoal(goalId, conversionValue, dimensions?): void

Tracks manual goal conversion

Parameters

Returns

void

PageViews

Table of contents

• trackPageView

trackPageView

▸ trackPageView(customPageTitle?): void

Tracks a visit on the page that the function was run on

Parameters

Returns

void

SiteSearch

Table of contents

• trackSiteSearch

trackSiteSearch

▸ trackSiteSearch(keyword, category?, searchCount?, dimensions?): void

Tracks search requests on a website

Parameters

Returns

void

UserManagement

Table of contents

• getUserId
• getVisitorId
• getVisitorInfo
• resetUserId
• setUserId

getUserId

▸ getUserId(): Promise<string>

The function that will return user ID

Returns

Promise<string>

getVisitorId

▸ getVisitorId(): Promise<string>

Returns 16-character hex ID of the visitor

Returns

Promise<string>

getVisitorInfo

▸ getVisitorInfo(): Promise<VisitorInfo>

Returns visitor information in an array

Returns

Promise<VisitorInfo>

resetUserId

▸ resetUserId(): void

Clears previously set userID, e.g. when visitor logs out

Returns

void

setUserId

▸ setUserId(userId): void

User ID is an additional parameter that allows you to aggregate data. When set up, you will be able to search through sessions by this parameter, filter reports through it or create Multi attribution reports using User ID

Parameters

Returns

void

eCommerce

Table of contents

• addEcommerceItem
• clearEcommerceCart
• ecommerceAddToCart
• ecommerceCartUpdate
• ecommerceOrder
• ecommerceProductDetailView
• ecommerceRemoveFromCart
• getEcommerceItems
• removeEcommerceItem
• setEcommerceView
• trackEcommerceCartUpdate
• trackEcommerceOrder

addEcommerceItem

▸ addEcommerceItem(productSKU, productName, productCategory, productPrice, productQuantity): void

Parameters

Returns

void

Deprecated

Please use the ecommerceAddToCart instead.

clearEcommerceCart

▸ clearEcommerceCart(): void

Returns

void

Deprecated

ecommerceAddToCart

▸ ecommerceAddToCart(products): void

Tracks action of adding products to a cart

Parameters

Returns

void

ecommerceCartUpdate

▸ ecommerceCartUpdate(products, grandTotal): void

Tracks current state of a cart

Parameters

Returns

void

ecommerceOrder

▸ ecommerceOrder(products, paymentInformation): void

Tracks conversion, including products and payment details

Parameters

Returns

void

ecommerceProductDetailView

▸ ecommerceProductDetailView(products): void

Tracks action of viewing product page

Parameters

Returns

void

ecommerceRemoveFromCart

▸ ecommerceRemoveFromCart(products): void

Tracks action of removing a products from a cart

Parameters

Returns

void

getEcommerceItems

▸ getEcommerceItems(): Promise<object>

Returns

Promise<object>

Deprecated

removeEcommerceItem

▸ removeEcommerceItem(productSKU): void

Parameters

Returns

void

Deprecated

Please use the ecommerceRemoveFromCart instead.

setEcommerceView

▸ setEcommerceView(productSKU, productName?, productCategory?, productPrice?): void

Parameters

Returns

void

Deprecated

trackEcommerceCartUpdate

▸ trackEcommerceCartUpdate(cartAmount): void

Parameters

Returns

void

Deprecated

Please use the ecommerceCartUpdate instead.

trackEcommerceOrder

▸ trackEcommerceOrder(orderId, orderGrandTotal, orderSubTotal?, orderTax?, orderShipping?, orderDiscount?): void

Parameters

Returns

void

Deprecated

Please use the ecommerceOrder instead.