How event tracking works on your flipbook when you add Google Analytics or Google Tag Manager integration.

Google Analytics

We track Pageviews (both initial load and if end user pages the flipbook) in Google Analytics. On top of that, we also track various Events across our flipbooks. Take a look at the list below for a full list of events.

Events

All events are tracked to the iPaper events category in the following formats:

Universal Analytics (UA):

window.ga(tracker.get('name') + '.send', {
	hitType: 'event',
	eventCategory: 'iPaper events',
	eventAction: [ACTION],
	eventLabel: [LABEL]
});

Google Analytics 4 (GA4):

window.gtag('event', [EVENT NAME], {
	event_category: 'iPaper events',
	event_label: [LABEL],
	event_title: [ACTION],
	event_action: [ACTION]
});

Overview

UA event name GA4 event name Data (conversion to eventLabel) Comment
External Link Click ipf_external_link_click 
{
  HoverText: [LINK_HOVER_TEXT],
  Url: [EXTERNAL_URL],
  Page: [PAGE_NUMBER]
}
 n.a.
Open Display ipf_open_display 
{
   Guid: [DISPLAY_GUID],
   Page: [PAGE_NUMBER]
}
 n.a.
Load ipf_load 
{
  Url: [FLIPBOOK_URL]
}
 Flipbook URL is simply read from window.location.href
PDF Download ipf_pdf_download n.a. n.a.
Popup Image Click ipf_popup_image_click 
{
  HoverText: [LINK_HOVER_TEXT],
  Url: [IMAGE_URL],
  Page: [PAGE_NUMBER]
}
 n.a.
Popup Image Gallery Click ipf_popup_image_gallery_click 
{
  HoverText: [LINK_HOVER_TEXT],
  Page: [PAGE_NUMBER]
}
 n.a.
Popup Content Click ipf_popup_content_click 
{
  HoverText: [LINK_HOVER_TEXT],
  Page: [PAGE_NUMBER]
}
 n.a.
Popup Frame Click ipf_popup_frame_click 
{
  HoverText: [LINK_HOVER_TEXT],
  Url: [FRAME_URL],
  Page: [PAGE_NUMBER]
}
 n.a.
Product Added to Basket ipf_product_added_to_basket 
{
  Id: [PRODUCT_ID],
  Name: [PRODUCT_NAME],
  Page: [PAGE_NUMBER]
}
 n.a.
News ticker External Link Click ipf_news_ticker_external_link_click 
{
  Url: [EXTERNAL_URL]
}
 n.a.
Search ipf_search 
{
  Term: [SEARCH_TERM]
}
 n.a.
Shop Checkout ipf_shop_checkout 
{
  NumberOfProducts: [NO_OF_PRODUCT_IN_CART],
  CheckoutType: [CHECKOUT_TYPE],
  BasketValue: [TOTAL_BASKET_VALUE]
}
 Possible CheckoutType values are Email, ShareEmail, Checkout, or Print.
Video Play ipf_video_play 
{
  Url: [VIDEO_URL],
  VideoType: [VIDEO_TYPE],
  Page: [PAGE_NUMBER]
}
 Only the first play is registered. Possible VideoType values are Video, YouTube, or Vimeo.
Amount Selector Modal Open ipf_amount_selector_modal_open 
{
  Id: [PRODUCT_ID],
  Page: [PAGE_NUMBER]
}
 n.a.
Products on Page Modal Open ipf_products_on_page_modal_open 
{
  Page: [PAGE_NUMBER]
}
 n.a.
Shop Detail Item Modal Open ipf_shop_detail_item_modal_open 
{
  Id: [PRODUCT_ID],
  Page: [PAGE_NUMBER]
}
 n.a.
Shop Multivariant Modal Open ipf_shop_multivariant_modal_open 
{
  Page: [PAGE_NUMBER]
}
 n.a.

Example

For example, when somebody searches for “Cute puppies” in your flipbook, we will track it as such via the “Search” event:

Universal Analytics (UA):

window.ga(tracker.get('name') + '.send', {
	hitType: 'event',
	eventCategory: 'iPaper events',
	eventAction: 'Search',
	eventLabel: 'Term: Cute puppies'
});

Google Analytics 4 (GA4):

window.gtag('event', 'ipf_search', {
	event_category: 'iPaper events',
	event_label: 'Term: Cute puppies',
	event_title: 'Search',
	event_action: 'Search',
	ip_term: 'Cute puppies'
});

If you need help setting up Google Analytics on your iPaper account, have a look at our Integrate Google Analytics With iPaper Google Analytics Tracking guide.

Google Tag Manager

Similar to Google Analytics, we track Pageviews (both initial load and if end user pages the flipbook) in Google Tag Manager. Pageviews on GTM are tracked as such:

window.dataLayer.push({
	event: 'virtualPageview',
	virtualPageUrl: [FLIPBOOK_PAGE_URL],
	virtualPageTitle: [FLIPBOOK_PAGE_TITLE],
});

On top of that, we also track various Events across our flipbooks.

Events

For all events we support, we’ll push the raw event data and the Category, Action and Label that we’d push to Google Analytics for the similar event.

For the events below we will push to the data layer in the following format

window.dataLayer.push({
	'event': [EVENT_NAME],
	'ipaperEventParams': [EVENT_DATA],
	'ipaperEventCategory': [GOOGLE_ANALYTICS_EVENT_CATEGORY],
	'ipaperEventAction': [GOOGLE_ANALYTICS_EVENT_ACTION],
	'ipaperEventLabel': [GOOGLE_ANALYTICS_EVENT_LABEL]
});

Overview

Event name Data (conversion to eventLabel) Comment
ipaperEvent_externalLinkClick 
{
  HoverText: [LINK_HOVER_TEXT],
  Url: [EXTERNAL_URL],
  Page: [PAGE_NUMBER]
}
 n.a.
ipaperEvent_openDisplay 
{
  Guid: [DISPLA_GUID],
  Page: [PAGE_NUMBER]
}
 n.a.
ipaperEvent_load 
{
  Url: [FLIPBOOK_URL]
}
 Flipbook URL is simply read from window.location.href
ipaperEvent_PDFDownload n.a. n.a.
ipaperEvent_leadgenPopupOpen 
{
  Name: [POPUP_NAME],
  Url: [CURRENT_URL]
}
 n.a.
ipaperEvent_leadgenPopupConversion 
{
  Name: [POPUP_NAME],
  Url: [CURRENT_URL]
}
 n.a.
ipaperEvent_leadgenPopupConversionByUrlClick 
{
  Name: [POPUP_NAME],
  Url: [CURRENT_URL]
}
 n.a.
ipaperEvent_popupImageClick 
{
  HoverText: [LINK_HOVER_TEXT],
  Url: [IMAGE_URL],
  Page: [PAGE_NUMBER]
}
 n.a.
ipaperEvent_popupGalleryImageClick 
{
  HoverText: [LINK_HOVER_TEXT],
  Page: [PAGE_NUMBER]
}
 n.a.
ipaperEvent_popupContentClick 
{
  HoverText: [LINK_HOVER_TEXT],
  Page: [PAGE_NUMBER]
}
 n.a.
ipaperEvent_popupFrameClick 
{
  HoverText: [LINK_HOVER_TEXT],
  Url: [FRAME_URL],
  Page: [PAGE_NUMBER]
}
 n.a.
ipaperEvent_productAddedToCart 
{
  Id: [PRODUCT_ID],
  Name: [PRODUCT_NAME],
  Page: [PAGE_NUMBER]
}
 n.a.
ipaperEvent_newsTickerExternalLinkClick 
{
  Url: [EXTERNAL_URL]
}
 n.a.
ipaperEvent_search 
{
  Term: [SEARCH_TERM]
}
 n.a.
ipaperEvent_shopCheckout 
{
  NumberOfProducts: [NO_OF_PRODUCT_IN_CART],
  CheckoutType: [CHECKOUT_TYPE],
  BasketValue: [TOTAL_BASKET_VALUE]
}
 Possible CheckoutType values are Email, ShareEmail, Checkout, or Print.
ipaperEvent_videoPlay 
{
  Url: [VIDEO_URL],
  VideoType: [VIDEO_TYPE],
  Page: [PAGE_NUMBER]
}
 Only the first play is registered. Possible VideoType values are Video, YouTube, or Vimeo.
ipaperEvent_amountSelectorModalOpen 
{
  Id: [PRODUCT_ID],
  Page: [PAGE_NUMBER]
}
 n.a.
ipaperEvent_productsOnPageModalOpen 
{
  Page: [PAGE_NUMBER]
}
 n.a.
ipaperEvent_shopDetailItemModalOpen 
{
  Id: [PRODUCT_ID],
  Page: [PAGE_NUMBER]
}
 n.a.
ipaperEvent_shopMultivariantModalOpen 
{
  Page: [PAGE_NUMBER]
}
 n.a.

Example

An example of a DataLayer push for the event ipaperEvent_externalLinkClick could look like this:

window.dataLayer.push({
	'event': 'ipaperEvent_externalLinkClick',
	'ipaperEventParams': {
		HoverText: 'The clicked links hover text', 
		Url: 'http://ipaper.io/', 
		Page: 12
	},
	'ipaperEventCategory': 'iPaper events',
	'ipaperEventAction': 'External Link Click',
	'ipaperEventLabel': 'HoverText: The clicked links hover text | Url: http://ipaper.io/ | Page: 12'
})

Page element click tracking on GTM

Aside from the events listed above, we also track the PageElementClicked event, but it’s only triggered for the internal & external linktype.

Event name Data Comment
PageElementClicked 
{
  Type: 'internal' | 'external',
  Data: {
    Url: String,
    Pagenumber: String
  }
}
 Triggered on internal and external linktypes only

Event labels in GA and GTM

The data format below is represented in JSON. It is converted to a string for the eventLabel object using the following convention:

  • Key names are PascalCased
  • Key-value pairs are separated by the pipe character |

Example:

{
  HoverText: [LINK_HOVER_TEXT],
  Url: [EXTERNAL_URL],
  Page: [PAGE_NUMBER]
}

…is converted into:

HoverText: [LINK_HOVER_TEXT] | Url: [EXTERNAL_URL] | Page: [PAGE_NUMBER]