# Google Analytics / GTM events

## 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):**

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

**Google Analytics 4 (GA4):**

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

{% hint style="info" %}
**Note:**

Google Analytics 4 (GA4) does not by default collect event categories, so event names in GA4 have ‘ipf\_’ prepended for iPaper Flipbook events
{% endhint %}

{% hint style="info" %}
**Note:**

When using Google Analytics 4 (GA4), the contents of event\_label are also sent as individual event parameters prepended with ‘ip\_’<br>
{% endhint %}

#### **Overview**

{% hint style="info" %}
**Note:**

Dependent on whether you are using Universal Analytics (UA) or Google Analytics 4 (GA4) the event names will be slightly different
{% endhint %}

<table><thead><tr><th width="245">Event name</th><th>Data</th><th>Comment</th></tr></thead><tbody><tr><td>ipaperEvent_externalLinkClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Url: [EXTERNAL_URL],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_openDisplay</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Guid: [DISPLA_GUID],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_load</td><td><pre class="language-javascript"><code class="lang-javascript">{java
  Url: [FLIPBOOK_URL]
}
</code></pre></td><td>Flipbook URL is simply read from <code>window.location.href</code></td></tr><tr><td>ipaperEvent_PDFDownload</td><td><code>{}</code></td><td></td></tr><tr><td>ipaperEvent_leadgenPopupOpen</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Name: [POPUP_NAME],
  Url: [CURRENT_URL]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_leadgenPopupConversion</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Name: [POPUP_NAME],
  Url: [CURRENT_URL]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_leadgenPopupConversionByUrlClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Name: [POPUP_NAME],
  Url: [CURRENT_URL]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_popupImageClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Url: [IMAGE_URL],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_popupGalleryImageClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_popupMediaGalleryClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_popupContentClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_popupFrameClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Url: [FRAME_URL],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_productAddedToCart</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Id: [PRODUCT_ID],
  Name: [PRODUCT_NAME],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_newsTickerExternalLinkClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Url: [EXTERNAL_URL]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_search</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Term: [SEARCH_TERM]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_shopCheckout</td><td><pre class="language-javascript"><code class="lang-javascript">{
  NumberOfProducts: [NO_OF_PRODUCT_IN_CART],
  CheckoutType: [CHECKOUT_TYPE],
  BasketValue: [TOTAL_BASKET_VALUE]
}
</code></pre></td><td>Possible <code>CheckoutType</code> values are <code>Email</code>, <code>ShareEmail</code>, <code>Checkout</code>, or <code>Print</code>.</td></tr><tr><td>ipaperEvent_videoPlay</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Url: [VIDEO_URL],
  VideoType: [VIDEO_TYPE],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td><strong>Only the first play is registered.</strong> Possible <code>VideoType</code> values are <code>Video</code>, <code>YouTube</code>, or <code>Vimeo</code>.</td></tr><tr><td>ipaperEvent_amountSelectorModalOpen</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Id: [PRODUCT_ID],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_productsOnPageModalOpen</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_shopDetailItemModalOpen</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Id: [PRODUCT_ID],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_shopMultivariantModalOpen</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr></tbody></table>

{% hint style="info" %}
**Note:**

The values in `[]` will be replaced with context specific value before sending the event.
{% endhint %}

#### **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):**

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

**Google Analytics 4 (GA4):**

```javascript
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](https://help.ipaper.io/en/articles/1857330-google-analytics-part-one-how-to-integrate-and-the-benefits-of-using-ga-with-ipaper) guide.<br>

## Google Tag Manager <a href="#google-tag-manager" id="google-tag-manager"></a>

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:

```javascript
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.

{% hint style="info" %}
**Note:**

When using Google Tag Manager to track to Google Analytics, it’s important that you haven’t also defined an [Analytics Tracking ID](https://help.ipaper.io/en/articles/1857330-google-analytics-part-one-how-to-integrate-and-the-benefits-of-using-ga-with-ipaper), since this will result in pageviews and events getting tracking twice or more. If Google Tag Manager is not used to track to Google Analytics, it’s okay to include both tags, but it’s adviced to stick with one or the other to keep your tracking as simple as possible.<br>
{% endhint %}

### Events <a href="#events-1" id="events-1"></a>

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

```javascript
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**

<table><thead><tr><th>Event name</th><th>Data</th><th>Comment</th></tr></thead><tbody><tr><td>ipaperEvent_externalLinkClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Url: [EXTERNAL_URL],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_openDisplay</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Guid: [DISPLA_GUID],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_load</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Url: [FLIPBOOK_URL]
}
</code></pre></td><td>Flipbook URL is simply read from <code>window.location.href</code></td></tr><tr><td>ipaperEvent_PDFDownload</td><td><code>{}</code></td><td></td></tr><tr><td>ipaperEvent_leadgenPopupOpen</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Name: [POPUP_NAME],
  Url: [CURRENT_URL]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_leadgenPopupConversion</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Name: [POPUP_NAME],
  Url: [CURRENT_URL]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_leadgenPopupConversionByUrlClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Name: [POPUP_NAME],
  Url: [CURRENT_URL]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_popupImageClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Url: [IMAGE_URL],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_popupGalleryImageClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_popupMediaGalleryClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_popupContentClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_popupFrameClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  HoverText: [LINK_HOVER_TEXT],
  Url: [FRAME_URL],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_productAddedToCart</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Id: [PRODUCT_ID],
  Name: [PRODUCT_NAME],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_newsTickerExternalLinkClick</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Url: [EXTERNAL_URL]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_search</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Term: [SEARCH_TERM]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_shopCheckout</td><td><pre class="language-javascript"><code class="lang-javascript">{
  NumberOfProducts: [NO_OF_PRODUCT_IN_CART],
  CheckoutType: [CHECKOUT_TYPE],
  BasketValue: [TOTAL_BASKET_VALUE]
}
</code></pre></td><td>Possible <code>CheckoutType</code> values are <code>Email</code>, <code>ShareEmail</code>, <code>Checkout</code>, or <code>Print</code>.</td></tr><tr><td>ipaperEvent_videoPlay</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Url: [VIDEO_URL],
  VideoType: [VIDEO_TYPE],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td><strong>Only the first play is registered.</strong> Possible <code>VideoType</code> values are <code>Video</code>, <code>YouTube</code>, or <code>Vimeo</code>.</td></tr><tr><td>ipaperEvent_amountSelectorModalOpen</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Id: [PRODUCT_ID],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_productsOnPageModalOpen</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_shopDetailItemModalOpen</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Id: [PRODUCT_ID],
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr><tr><td>ipaperEvent_shopMultivariantModalOpen</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Page: [PAGE_NUMBER]
}
</code></pre></td><td></td></tr></tbody></table>

#### **Example**

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

```javascript
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.

<table><thead><tr><th>Event name</th><th>Data</th><th>Comment</th></tr></thead><tbody><tr><td>PageElementClicked</td><td><pre class="language-javascript"><code class="lang-javascript">{
  Type: 'internal' | 'external',
  Data: {
    Url: String,
    Pagenumber: String
  }
}
</code></pre></td><td>Triggered on <strong>internal</strong> and <strong>external</strong> linktypes <em>only</em></td></tr></tbody></table>

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

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

…is converted into:

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