Item view count notification

How many visitors have seen this product?

This personalized web layer that shows the number of unique visitors which have seen this product in last 60 minutes. This
number is loaded from report of top viewed products.

Components

  • Tracking – tracking of event “view item” with identifying attribute (product ID, page URL, product name,
    etc)
  • Report – report of top viewed products
  • Web layer – notification web layer to display the number
  • Bootstrap code – code to invoke the notification

Implementation

Note: some JavaScript coding knowledge is required.

Tracking

Setup tracking of event “view item” on product page.

Event specification:

Trigger: product page loaded

Attributes:

  • id (product ID)
  • name (optional, product name)
var product_id = "123";
exponea.track("view item", { "id": product_id });

You need to assign currently viewed product ID to the product_id variable.

Example: Product ID is in URL

You can use advanced regular expression to parse product ID from product page URL.

var m = location.href.match(/https:\/\/www\.yourweb\.com\/products\/[a-z\-]+\/(\d+)/);
var product_id = parseInt(m[1]);

Example: Product ID as JavaScript variable

var product_id = product.id;

Example of final tracking code

var m = location.href.match(/https:\/\/www\.yourweb\.com\/products\/[a-z\-]+\/(\d+)/);
var product_id = parseInt(m[1]);
exponea.track("view item", { "id": product_id });

Report

When tracking is in place we can create a report based on “view item” event. Analysis > Reports > New

  1. ROWS: event “view item”.id Grouping: top(1000)
  2. Report time filter “Last 60 minutes”
  3. Metrics: count event “view item”

Note: We will show web layer for particular product while searching for it’s ID in this report. First row in report must be the corresponding product ID, as it might not match when a different grouping is used.

Save report ID

Once the report is saved find report ID in the URL. https://app.exponea.com/#/p/exponea-demo-e-shop/analytics/reports/58b01822fb6009bfc3c698eb/edit

The important part is the report ID: 58b01822fb6009bfc3c698eb (unique for each report). Save this report ID for later
use.

Web layer design

Campaigns > Web layers > New Change template to “Notification”

Customize your web layer design.

Save web layer ID

Once the web layer is saved find web layer ID in the URL.

https://app.exponea.com/#/p/exponea-demo-e-shop/campaigns/banners/593a96c9fb6009df531be6ed?action=design

Save this web layer ID for later use.

Bootstrap code

Setup bootstrap code to run on product page to show notification. We will be passing product_id to enable personalization
for our notification web layer.

Create new “Custom JavaScript code” tag in Data & Assets > Tag Manager > New (Read more: How to use Tag Manager)

var product_id = "123";
exponea.showBanner("web layer ID", { "product_id": product_id });
  1. replace “web layer ID” with your own web layer ID from previous step
  2. assign currently viewed product ID to product_id variable (see Tracking on how to get product_id)

 Example of final code

exponea.showBanner("593a96c9fb6009df531be6ed", { "product_id": product_id });

Personalize the web layer

We will be personalizing:

  • Notification text – to show the metric from the report
  • JavaScript code – to decide if we want to show notification at all (we can disable showing if the number is too low)

Notification text

“In last hour, this product has been seen by 123 people” – We want to substitute 123 with dynamic (real) number from the
report.

Create personalization Jinja code referring to our report with parameter product_id.

{{ report_value_by_key('report ID', params.product_id) }}

replace “report ID” with your own report ID from step before

Example – final personalized text

In last hour, this product has been seen by {{ report_value_by_key('58b01822fb6009bfc3c698eb', params.product_id) }} people

JavaScript code

Programmatically decide if we want to show notification at all (we can disable showing if the number is too low) Switch to
JavaScript code

Insert following code snippet before the existing JavaScript code of the web layer.

var viewThreshold = 10;
var count = parseInt("{{ report_value_by_key('report ID', params.product_id) or 0 }}");
if (count < viewThreshold) {
    return;
}

Set viewThreshold to the minimum of unique visitors needed to show this notification web layer.

Set “report ID” to report ID from step above.

Example – Final code

We will not show the notification when the number of visitors is below 10.

var viewThreshold = 10;
var count = parseInt("{{ report_value_by_key('58b01822fb6009bfc3c698eb', params.product_id) or 0 }}");
if (count < viewThreshold) {
    return;
}
var self = this;
var showDelay = parseInt('[[ bannerShowDelayInMilliseconds ]]' || '0', 10);
setTimeout(function () {
    self.sdk.track('banner', getEventProperties('show', false));

... rest of the existing code

Launch notification

Start the bootstrap code in Tag Manager to launch view count notification.

Important: Do not start the web layer, because it is invoked from the bootstrap code in the tag programmatically.
Further reading:

  • AB testing and custom control group