Social proof

Published March 12, 2021

Modules

Difficulty

Selected Clients

---

Industry

Books

Electronics

Fashion & Apparel

Home & Furniture

Jewelry

Retail

Multi

Cosmetics

A lot of purchases are made due to the recommendation heard from friends or people with similar preferences. People generally choose products that regularly sell out and get positive feedback.

That is why it is worth putting social proof on the product page to authenticate the fact that customers like a new product. Then the visitors to your website are more likely to buy a product that other customers are happy with. Social proof can shape our decisions and increase the sales.

We encourage you to add different types of social proof to the product page:

• number of products already purchased during a specific range of time,
• number of people who have viewed this product during specific range of time,
• number of downloaded materials,
• stock availability.

Example of use - Electronics industry

Challenge

Our client from Electronics industry decided to inform customers how many users were interested in a particular item to convince them to make a purchase. The client did it in 2 ways:

• If a product was visited by more than 1 person, customers get the notification how many users were watching the product in the last 1 hour.
• Additionally, if a product was bought in last 24 hours, the social proof was enriched with information how many customers bought this product.

Results

4% higher coversion than in group without Social proof

Prerequisites

• Implement a tracking code.
• Manage transaction events section.

Process

To prepare social proof, you have to create dynamic content with a metric, which will dynamically count particular event occurrence for each product. Perform the steps in the following order:

1. Create metric with dynamic key.
2. Prepare a dynamic content.

Create metric with dynamic key

Social proof is a metric with a dynamic key, thanks to which the statistics on a product page will be displayed in real time and they will adjust to the product that is being currently viewed.

In our case, we will follow two scenarios for the implementation of social proof:

• Metric with a page visit.
• Metric with the number of bought items.

Metric with a page visit

If you want to display a message that X users watched the product in the last X hours, you have to prepare a metric for page.visit event.

1. Go to Analytics > Metrics > New metric.

2. Leave the type, aggregator and occurrence to default.

3. From the Choose events dropdown list, select page.visit (product:retailer_part_no in our example).

4. Click the + where button and select a parameter that indicated a product ID - in this case its $sku.

5. From the Choose operator select Contain(product id in our example).

6. Click the icon next to the logic operator and keep clicking until you get .

7. In the left field, enter sku.

8. In the right field, enter the value of the SKU (0 in our example).

9. Define time from which metric counts the page visit, for example last 24 hours (60 minutes in our example)

   

Metric with the number of bought items

If you want to display a message that X users bought the product in the last x hours, you have to prepare a metric for product.buy.

1. Go to Analytics > Metrics > New metric.

2. Leave the type, aggregator and occurrence to default.

3. From the Choose events dropdown list, select product.buy.

4. Click the + where button and select a parameter that indicated a product ID (in this case its $sku).

5. From the Choose operator select Contain (product id. in our example).

6. Click the icon next to the logic operator and keep clicking until you get .

7. In the left field, enter sku.

8. In the right field, enter the value of the SKU (0 in our example).

9. Define time from which metric counts the page visit (24 hours in our example).

   

Prepare a dynamic content

To show a social prooof on your website, prepare a dynamic content.

1. Go to Communication > Dynamic content > Create communication.
2. Choose Insert Object type.
3. In the Audience section, select Everyone.
4. In the Content section, select Simple message and by inserting CSS selector define where the social proof will display on your website.
5. In the Content tab, click Create Message and insert a code of the metrics which you prepared in the previous steps.

• The customer will receive information about the number of visits to a given page and then how many times the product has been bought.

  Check the Javascript with gif

       
       (function(){
          var availableMetrics = [];
          //Adding metric prepared in point 1.1
          var firstMetricsVal = "{% socialproof %} xxx {% endsocialproof %}";
          //Adding metric prepared in point 1.2
          var secondMetricsVal = "{% socialproof %} xxx {% endsocialproof %}";
          //Adding variant text for 1st metric one for person
          var textFirstMetricOnePerson = 'person is watching this product now.';
          //Adding variant text for 1st metric for few people
          var textFirstMetricPeople = 'people are watching this product now.';
          //Adding variant text for 2nd metric for person
          var textSecondMetricOnePerson = 'sold in the last 1 hour.';
          //Adding variant text for 2nd metric for few people
          var textSecondMetricPeople = 'sold in the last 1 hour.';
          function handleCounterText(val, variantA, variantB) {
              if (val.length === 1) {
                  let finalVariant = getWordVariant(+val, variantA, variantB);
                  return `${val} ${finalVariant}`;
              } else {
                      let lastNumber = val.slice(-1);
                      let finalVariant = getWordVariant(+lastNumber, variantA, variantB);
                      return `${val} ${finalVariant}`; 
              }
          }
          function getWordVariant(num, variantA, variantB) {
              if (num == 1) {
                  return variantA;
              } else {
                  return variantB;
              }
          }
            var firstMetrics = `
              <div id="synerise-social-proof">
                  <p class="socialproof-text">${handleCounterText(firstMetricsVal, textFirstMetricOnePerson,textFirstMetricPeople )}</p>
              </div>`;
          var secondMetrics = `
          <div id="synerise-social-proof">
              <p class="socialproof-text">${handleCounterText(secondMetricsVal, textSecondMetricOnePerson, textSecondMetricPeople)}</p>
          </div>`;
          if (firstMetricsVal >= 1) {
              availableMetrics.push(firstMetrics);
          }
          if (secondMetricsVal >= 1) {
              availableMetrics.push(secondMetrics);
          }
          var wrapper = document.querySelector('#synerise-social-proof-place');
          wrapper.style.position = "fixed";
          var availableMetricsCounter = 0;
          setInterval(function() {
              if (document.querySelector('#synerise-social-proof') !== null&&document.querySelector('#synerise-social-proof>p')){
                  wrapper.removeChild(document.querySelector('#synerise-social-proof'));
              };
              wrapper.insertAdjacentHTML('beforeend', availableMetrics[availableMetricsCounter]);
              if (availableMetrics.length === 1) {
                  return;
              }
              if (availableMetricsCounter >= availableMetrics.length - 1) {
                  availableMetricsCounter = 0;
              } else {
                  availableMetricsCounter++;
              }
          }, 3000);
       })()
  
  
     
  

• The customer will get a graphic that will contain information about the number of visits and purchases of the product.

  Check the Javascript with graphic

       
       (function(){
              //Adding metric prepared in point 1.1
              var firstMetricsVal = "{% socialproof %} xxx {% endsocialproof %}";
              //Adding metric prepared in point 1.2
              var secondMetricsVal = "{% socialproof %} xxx {% endsocialproof %}";
              //Adding variant text for 1st metric one for person
              var textFirstMetricOnePerson = 'person is watching this product now.';
              //Adding variant text for 1st metric for few people
              var textFirstMetricPeople = 'people are watching this product now.';
              //Adding variant text for 2nd metric for person
              var textSecondMetricOnePerson = 'sold in the last 1 hour.';
              //Adding variant text for 2nd metric for few people
              var textSecondMetricPeople = 'sold in the last 1 hour.';
              function handleCounterText(val, variantA, variantB) {
                  if (val.length === 1) {
                      let finalVariant = getWordVariant(+val, variantA, variantB);
                      return `${val} ${finalVariant}`;
                  } else {
                          let lastNumber = val.slice(-1);
                          let finalVariant = getWordVariant(+lastNumber, variantA, variantB);
                          return `${val} ${finalVariant}`;
                  }
              }
              function getWordVariant(num, variantA, variantB) {
                  if (num == 1) {
                      return variantA;
                  } else {
                      return variantB;
                  }
              }
                var firstMetrics = `
                  <div id="synerise-social-proof">
                      ${firstMetricsVal >= 1?('<p class="socialproof-text">'+handleCounterText(firstMetricsVal, textFirstMetricOnePerson,textFirstMetricPeople)+"</p>"):''}
                  ${secondMetricsVal >=1?('<p class="socialproof-text">'+handleCounterText(secondMetricsVal, textSecondMetricOnePerson, textSecondMetricPeople)+'</p>'):''}
              </div>`; 
              var wrapper = document.querySelector('#synerise-social-proof-place');
              wrapper.style.position = "fixed";
                if(firstMetricsVal >=1||secondMetricsVal >= 1){
                  if (document.querySelector('#synerise-social-proof') !== null){
                      wrapper.removeChild(document.querySelector('#synerise-social-proof'));
                  };
                  wrapper.insertAdjacentHTML('beforeend',firstMetrics );
              }
          })()
    
     
  

6. Schedule when the dynamic content has to be active

   

7. Schedule when the dynamic content has to be active.

8. In the Display settings, define the circumstances the dynamic content will be shown:

• Always on landing, on All pages if in CSS selector is unique selector for a product page.
• Always on landing, on a specific URL which indicates a product page (for example, if a URL contains product), if CSS selector is not unique for a product page.

Check the use case set up on the Synerise Demo workspace

Check all items (metrics and dynamic content) created in this use case in our Synerise Demo workspace:

• Metric that returns the number of visits in last 60 minutes, -Metric that returns the number of items sold in last 24 hours,
• Dynamic content settings.

If you don’t have access to the Synerise Demo workspace, please leave your contact details in this form, and our representative will contact you shortly.

Read more

• Dynamic content
• Dynamic key
• Metrics