How can I track interactions with popups and content?

On your site or app, you can collect data about impressions and interactions with popups and content. In this article, we’ll show you how to set it up.

Before you start

Here are some things to know before you begin:

• You can collect data about impressions and interactions for: 
  • Popups added under Tag Manager > Tags > Add a tag > Custom popup.
  • Content added under Tag Manager > Tags > Add a tag > Custom content.
• Any page content you tag in your website’s code.

Turn on popups and content tracking

To turn on collecting data for popups and content, follow these steps:

1. Go to Menu > Tag Manager.
2. Navigate to Tags.
3. On the left, click Piwik PRO (tracking code).
4. In Data collection, toggle Interactions with popups and content.
   

   

5. In Count an impression when, you can set up the following elements:
   • Content loads on the page
   • Visitor sees the content: A visitor scrolls down the page and sees your content.

   

6. When you’re done, click Save.
7. Click Publish.

Tag an element on your website

If you want to collect data about impressions of any content, you need to tag each element in your website’s code. Each case is different so we’ll show you an example from our demo Clear Bank website.  

On the Clear Bank’s website we have a newsletter signup set as a banner. We want to know how many people see the banner and click on the signup button. To collect this data, we’ll tag elements of this banner.

To tag an element, you can use the following attributes or CSS classes:

• Content block: An element on your website that consists of a content name, piece, and target. [data-track-content] or .piwikTrackContent
• Content name: A name of the tracked content block. The name will show up in the report. You can use one name for many content pieces. [data-content-name=""]
• Content piece: A piece of the tracked content block, for example, a creative, banner, or video. The piece will show up in the report. [data-content-piece=""] or .piwikContentPiece
• Content target: A target of the tracked content block, for example, a link in the content block. The target will show up in the report. [data-content-target=""] or .piwikContentTarget

To tag an element, follow these steps:

1. Find the element on your website that you want to track. For example, a div class of the banner.
   

   

2. Add a piwikTrackContent class or a data-track-content attribute to HTML. For example:

   Add a class:

   <div class="et_pb_column et_pb_column_4_4 et_pb_column_16 et_pb_css_mix_blend_mode_passthrough et-last-child piwikTrackContent">

   Add an attribute:

   <div class="et_pb_column et_pb_column_4_4 et_pb_column_16 et_pb_css_mix_blend_mode_passthrough et-last-child" data-track-content>

3. Add a content name, piece, and target to HTML. You can add only a name. For example:

   Add a class:

   <button type="submit" class="et_pb_contact_submit et_pb_button piwikContentPiece" >Subscribe</button>

   Add an attribute:

   <button type="submit" class="et_pb_contact_submit et_pb_button" data-content-piece="subscribeButton">Subscribe</button>

Content performance report

To see collected data for popups and content impressions, follow these steps:

1. Go to Menu > Analytics.
2. Navigate to Reports.
3. On the left, click Content performance.
4. View the report.
   

   

In this report, you’ll see the following metrics:

• Content impressions: The number of times a content block was displayed to visitors.
• Content interactions: The number of times visitors interacted with a content block, for example, clicked an element in a content block.
• Content interaction rate: A percentage that tells you how many people interacted with a content block. Content interaction rate = Content interactions / Content impressions * 100%