Social proof Widget

The Social proof widget is part of the Dynamic Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.

Introduction

The Social Proof widget enables you to display a message for your visitors, specifying the number of views or purchases for a specific product page for a defined duration.

Social Proof is a social psychology principle that describes the fact that individuals are highly influenced by the behaviors and opinions of others. In the case of a newspaper article, the more views it has, the more people will be tempted to read it because it has already sparked the interest of others. In the case of a commercial product, a large number of views may convince people that the product is popular and therefore make them want to purchase it. A large number of purchases is likely to accelerate the purchase decision of hesitant users, who fear the item will soon be out of stock. They will also view a large number of purchases as proof of the article’s high quality. A low number of views or purchases, on the other hand, is likely to put the visitor off buying.

In short, this widget can make a huge impact if targeted properly on volume of traffic or volume of purchases.

Configuration

Layout tab

We offer 4 different layouts:

• modal (pop-in)

• top banner

• bottom banner

• free placement (which allows you to place the widget wherever you want in the page flow)

Dimensions

• Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. It helps you not to worry about modals dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

But, for many of our users, this default dimensions management was not enough. So we came up with something trickier but more flexible. If you untoggle the toggler, we will be able to define both width and height of the pop-in. And, last but not least, you will able to define them (independently) in several dimensional units:

• • px (pixels)

  • % (percentage)

  • em (element, which actually means that it is based on the size of the text of the element, if your font-size is 18 px, then 1 em = 18 px)

  • vw (1/100th of the window's (or viewport) width)

  • vh (1/100th of the window's (or viewport) height)

  • vmin (whichever is the smallest of vw or vh)

  • vmax (whichever is the highest of vw or vh)

Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. Some of you may think that being able to define height in vw or width in vh doesn't make sense and that it is a bug or an oblivion on our side's but it is not. It can be useful to do, in some very edgy cases, that is for sure.

We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.

If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.

• Preserve ratio (automatic height)

By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any height, it takes what the modal needs and can even reach 100% of the available height in the viewport.

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.

Know issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width. And results can be surprising...

We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't found a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.

Layer

Layer Position (z-index)

If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.

Content tab

Select a variable to display

Pick between "Number of purchases" or "Number of views". "Number of views" is the default value. Depending on which value you select, it will display the number of times the page has been viewed or the number of times the product has been bought (thanks to the transaction tag).

Select a period to display

Depending on your volume of sales of the 'social' pressure level you want to add, you may select a duration value among these: last 3 hours, last 12 hours, last 24 hours, last 3 days or last 7 days. We advise you to start with the longest and increase throughout your experiments to find your best fit.

Create your own content with dynamic tags

Customize the default text, position the different variables exactly where you want them to be. This allows you to write a lot of combinations in your own language and adapted to your needs.

• !views!: The number of times your visitors have viewed your product page (multiple views per visitor)

• !purchaseQty!: The number of purchases your visitors have made on this particular product from any page or section of your website.

• !period! : duration value (number of hours or days).

• !unit! : duration unit ("hours" or "days"). You can also remove it and replace it using your own words.

Style tab

Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.

Background can be set up with an image using the image-fitting policy

4 options are provided:

• "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.

• "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)

• "Fill": the image is resized to fill the background container without keeping the aspect ratio

• "None": the image is left unchanged.

Conditions tab

Contrarily to other widgets, the Social Proof widget has a distinctive "Conditions" tab. Especially for the triggering part.

Triggering

Depending on if you picked view or purchases in the content tab, you will be able to trigger the display of the widget from a specific number of views or purchases. In both cases, minimum is 0 and maximum is 1,000. By default, the value is 200 for 'views' and 50 for 'purchases'. You can override them.

This volume trigger applies to all the targeted products and start to collect views and purchases as soon as the widget is activated for your account (TDB enablement). Which means that you may have to wait a little to be able to QA the widget in order to have collected data between the moment your widget was enabled and between your campaign is in QA.

Be careful when doing the quality assurance on a campaign with a Social Proof widget. If the trigger level is higher than the actual number of views / purchases. You may not see the widget.

Recurrence

The recurrence is managed the same way as explained here, in the common Conditions tab article.

Implementation

Pre-requisites

In order to display the number of purchases, AB Tasty has to retrieve information regarding the corresponding product, which is registered in your data layer, or directly in the source code of your website (DOM).

We recommend using a data layer on your website. A data layer can register and gather information on the product for which you want to determine the number of transactions. For more information, please refer to the Integrating your Data layer into your AB Tasty account article.

Before configuring the widget via the campaign editor, if you want to determine the number of transactions for a product, you need to:

• Implement the Item hit and the transaction tag

• Define the window.ABTastyProductKey variable

URL Parameters

The number of views for a product is collected automatically thanks to AB Tasty’s data collection system (Universal Collect).

The Social Proof widget relies on the URL of the page, including path name (without the gclid parameter (Google Ads' automatic marking)). Anchors are not taken into account by the widget.

The "Ignore URL parameters to differentiate pages" toggler is disabled by default. This option aims to help users define with more precisions if what they call "a product" is a variation of a more generic product or the generic product.

For example, in the tourism industry, many websites have per-hotel or per-flight URLs but however uses URL parameters to make distinctions on room types, nights, options, dates, classes...

• myhotel.com/hotel-cancun-123?room=suite-deluxe&checkin=12052021&checkout=19052021

• myflight.com/dublin-vilnius-xair?outbound=12052021&return=19052021&class=economy

But it also sometimes happens in fashion or other industries...

• mytshirt.com/tshirt-fancy-123?size=xl&color=grey&design=19

• mymachinery.com/tiller?wheels=4&absorber=yes&options=security-pack

In order to set this toggler the best way possible, the questions you have to ask yourself are:

1st question: "Are

• • myhotel.com/hotel-cancun-123

  • myhotel.com/hotel-cancun-123?room=suite-deluxe&checkin=12052021&checkout=19052021

the same product or two different products?"

If not, let the toggler disabled ; if yes, enable the toggler.

2nd question: "Is myhotel.com/hotel-cancun-123 a real purchasable product (or has it to be set up (options, dates...))?"

If yes, let the toggler disabled ; if no, enable the toggler.

Now, if you want to display the Social Proof widget only on distinctive product variations and not on the generic product pages, you may set your campaign targeting criteria to only URLs containing parameters.

Implementing the Item hit and the transaction tag

The Item hit enables the collection of information on the product for which you want to collect and display the number of transactions (average cart value, item price, etc.). To make the Social Proof widget work, tid (transaction ID, the id of the transaction), ic (item code, the SKU of the product... in short: a unique identifier) and in (item name) parameters are required. For other parameters, you can implement a default value. Nevertheless, they must respect a given type of data in order to guarantee the calls with the database.

To implement the Item hit, you also need to implement the transaction tag on your website. The transaction tag enables you to save the data related to the transactions carried out on your website (e.g. transaction amounts, payment methods, number of items purchased, etc.).

To implement the transaction tag and the item hit, please refer to the How to implement the Transaction Tag article.

For more information, see the technical documentation.

Defining the window.ABTastyProductKey variable

After implementing the transaction tag and the item hit, you need to define the window.ABTastyProductKey variable with the value of the product (item code) for which you want to collect and display the number of transactions.

Once the variable is defined, the Social Proof widget connects the information of the database with the value defined in the window.ABTastyProductKey variable. If this information matches, it means that the value of the variable and the item code of the Item hit are similar: the widget can display the number of transactions carried out on the product via the widget.

To define the window.ABTastyProductKey variable, apply the following steps:

Copy the following code, paste it in "Add JS" (in the variation menu), replace YOURDATALAYER with your dataLayer name & replace ITEMSKUKEY with the adequate parameter name present in your dataLayer.

function setABTastyProductKey() {
 if (typeof YOURDATALAYER !== "undefined") {  /* Set YOURDATALAYER variable with the correct name */
   window.ABTastyProductKey = YOURDATALAYER.ITEMSKUKEY; /* Set YOURDATALAYER.ITEMSKUKEY variable with the correct path. */
 } else {
   setTimeout(setABTastyProductKey);
 }
}
setABTastyProductKey();

The value you define in the window.ABTastyProductKey variable must be the same as the item code (product SKU) located in the Item hit.

We recommend implementing the code directly in the editor of the campaign rather than in the global code of the website, as this code is only necessary for pages using the Social Proof widget.

Tracking

The social proof widget sends an AT hit “Social proof displayed” when it meets the conditions and is displayed.

However, you need to create a custom tracking and add it during the goals step to make it appear in the report of the campaign

QA your implementation

To QA your campaign using social proof widget and the main implementation, please activate the QA mode on your campaign and use the browser console to QA.