Social proof: number of customers interested in a particular product

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.
Screenshot presenting website with social proof dynamic content
Main graphic with social proof dynamic content

Results

4% higher coversion than in group without Social proof

Requirements


To implement this use case, perform the following steps in the given order:

How to do it


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


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.
    Screenshot presenting Metric with page visit
    Metric for page visit
  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 Choose value icon.
  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.
    Screenshot presenting Metric filter
    Metric filter
  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 Choose value icon.
  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).
Tip: In the same way you can prepare metric for addToCart event

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 metric 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.';
    
        <span class="kd">function</span> <span class="nx">handleCounterText</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">variantA</span><span class="p">,</span> <span class="nx">variantB</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">val</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">let</span> <span class="nx">finalVariant</span> <span class="o">=</span> <span class="nx">getWordVariant</span><span class="p">(</span><span class="o">+</span><span class="nx">val</span><span class="p">,</span> <span class="nx">variantA</span><span class="p">,</span> <span class="nx">variantB</span><span class="p">);</span>
                <span class="k">return</span> <span class="sb">`</span><span class="si">${</span><span class="nx">val</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">finalVariant</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
               
                    <span class="kd">let</span> <span class="nx">lastNumber</span> <span class="o">=</span> <span class="nx">val</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">);</span>
                    <span class="kd">let</span> <span class="nx">finalVariant</span> <span class="o">=</span> <span class="nx">getWordVariant</span><span class="p">(</span><span class="o">+</span><span class="nx">lastNumber</span><span class="p">,</span> <span class="nx">variantA</span><span class="p">,</span> <span class="nx">variantB</span><span class="p">);</span>
                    <span class="k">return</span> <span class="sb">`</span><span class="si">${</span><span class="nx">val</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">finalVariant</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span>
                
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kd">function</span> <span class="nx">getWordVariant</span><span class="p">(</span><span class="nx">num</span><span class="p">,</span> <span class="nx">variantA</span><span class="p">,</span> <span class="nx">variantB</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">num</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">variantA</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">variantB</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">}</span>
          <span class="kd">var</span> <span class="nx">firstMetrics</span> <span class="o">=</span> <span class="sb">`
    

    <div id="synerise-social-proof"> <p class="socialproof-text">${handleCounterText(firstMetricsVal, textFirstMetricOnePerson,textFirstMetricPeople )}</p> </div></span><span class="p">;</span> <span class="kd">var</span> <span class="nx">secondMetrics</span> <span class="o">=</span> <span class="sb"> <div id="synerise-social-proof"> <p class="socialproof-text">${handleCounterText(secondMetricsVal, textSecondMetricOnePerson, textSecondMetricPeople)}</p> </div>`;

        <span class="k">if</span> <span class="p">(</span><span class="nx">firstMetricsVal</span> <span class="o">&gt;=</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">availableMetrics</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">firstMetrics</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">secondMetricsVal</span> <span class="o">&gt;=</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">availableMetrics</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">secondMetrics</span><span class="p">);</span>
        <span class="p">}</span>
    
        <span class="kd">var</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#synerise-social-proof-place&#39;</span><span class="p">);</span>
        <span class="nx">wrapper</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="s2">&#34;fixed&#34;</span><span class="p">;</span>
      
        <span class="kd">var</span> <span class="nx">availableMetricsCounter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
     
          
        <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#synerise-social-proof&#39;</span><span class="p">)</span> <span class="o">!==</span> <span class="kc">null</span><span class="o">&amp;&amp;</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#synerise-social-proof&gt;p&#39;</span><span class="p">)){</span>
                <span class="nx">wrapper</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#synerise-social-proof&#39;</span><span class="p">));</span>
            <span class="p">};</span>
            <span class="nx">wrapper</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="s1">&#39;beforeend&#39;</span><span class="p">,</span> <span class="nx">availableMetrics</span><span class="p">[</span><span class="nx">availableMetricsCounter</span><span class="p">]);</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">availableMetrics</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">availableMetricsCounter</span> <span class="o">&gt;=</span> <span class="nx">availableMetrics</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">availableMetricsCounter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">availableMetricsCounter</span><span class="o">++</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">},</span> <span class="mi">3000</span><span class="p">);</span>
     <span class="p">})()</span>
    

  • 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.';
    
            <span class="kd">function</span> <span class="nx">handleCounterText</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">variantA</span><span class="p">,</span> <span class="nx">variantB</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">val</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                    <span class="kd">let</span> <span class="nx">finalVariant</span> <span class="o">=</span> <span class="nx">getWordVariant</span><span class="p">(</span><span class="o">+</span><span class="nx">val</span><span class="p">,</span> <span class="nx">variantA</span><span class="p">,</span> <span class="nx">variantB</span><span class="p">);</span>
                    <span class="k">return</span> <span class="sb">`</span><span class="si">${</span><span class="nx">val</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">finalVariant</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                   
                        <span class="kd">let</span> <span class="nx">lastNumber</span> <span class="o">=</span> <span class="nx">val</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">);</span>
                        <span class="kd">let</span> <span class="nx">finalVariant</span> <span class="o">=</span> <span class="nx">getWordVariant</span><span class="p">(</span><span class="o">+</span><span class="nx">lastNumber</span><span class="p">,</span> <span class="nx">variantA</span><span class="p">,</span> <span class="nx">variantB</span><span class="p">);</span>
                        <span class="k">return</span> <span class="sb">`</span><span class="si">${</span><span class="nx">val</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">finalVariant</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span>
                    
                <span class="p">}</span>
            <span class="p">}</span>
            <span class="kd">function</span> <span class="nx">getWordVariant</span><span class="p">(</span><span class="nx">num</span><span class="p">,</span> <span class="nx">variantA</span><span class="p">,</span> <span class="nx">variantB</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">num</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">return</span> <span class="nx">variantA</span><span class="p">;</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="k">return</span> <span class="nx">variantB</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">}</span>
              <span class="kd">var</span> <span class="nx">firstMetrics</span> <span class="o">=</span> <span class="sb">`
    

    <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>`;

            <span class="kd">var</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#synerise-social-proof-place&#39;</span><span class="p">);</span>
            <span class="nx">wrapper</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="s2">&#34;fixed&#34;</span><span class="p">;</span>
         
              <span class="k">if</span><span class="p">(</span><span class="nx">firstMetricsVal</span> <span class="o">&gt;=</span><span class="mi">1</span><span class="o">||</span><span class="nx">secondMetricsVal</span> <span class="o">&gt;=</span> <span class="mi">1</span><span class="p">){</span>
    
                <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#synerise-social-proof&#39;</span><span class="p">)</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">){</span>
                    <span class="nx">wrapper</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#synerise-social-proof&#39;</span><span class="p">));</span>
                <span class="p">};</span>
                <span class="nx">wrapper</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="s1">&#39;beforeend&#39;</span><span class="p">,</span><span class="nx">firstMetrics</span> <span class="p">);</span>
              
            <span class="p">}</span>
       
        <span class="p">})()</span>
    

  1. Schedule when the dynamic content has to be active

    Screenshot presenting display settings
    Set up display settings
  2. Schedule when the dynamic content has to be active.

  3. 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.

Read more

This use case belongs to the following categories:

Challenges:

Features:

😕

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

😉

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.