COVID-19 Social Proof Banner
Social proof banners inform your customer about how many others have purchased your products since the quarantine has started.
Customers are uncertain and to remove doubt and reduce their anxiety, we can show social proof banners specific to the current situation we’re in now. The banner can include different messages, but we chose two options as default.
Purchase count banner
This goes into your data and counts the number of purchases by product_id in the last 2 weeks. Then it matches it with the product ID of the page the customer is on and displays the banner. The given text is: "This item recently got way more popular! X people bought it in the last 2 weeks". However, the text is parametric so you can adjust it within the web layer.
Make sure that the “purchase count report” uses the correct definition of purchase as an event.
Shipment count banner
This goes into your data and counts the number of shipments by product_id in the last 2 weeks. Then it matches it with the product ID of the page the customer is on and displays the banner. The given text is: "This item recently got way more popular! It was safely delivered to X people in the last 2 weeks". However, the text is parametric so you can adjust it within the web layer.
Make sure that the “shipment count report” uses the correct definition of shipment as an event.
Importing the Social Proof Banner
In order to import the package, copy the following JSON code into a text file and import it following the guide in the Initiatives article.
{"files":[],"initiative":{"archived":false,"cloned_from_id":"5e74ce7f6172a7f89654ea55","color":"#00b7db","description":"A play on Social Proof Banners:\n\"This item recently got way more popular! X people bought it in the last 2 weeks\"\n\"This item recently got way more popular! It was safely delivered to X people in the last 2 weeks\"","name":"CV19 Social Proof","pinned":false,"prevent_archivation":false},"items":[{"data":{"all_exposing_properties":[],"archived":false,"client":{"chart_type":"column","color_theme":0,"display":"table","items_per_page":50,"order_column":1,"order_direction":"desc","page":1,"report_type":"report","series_settings":[]},"cloned_from_id":"5e74ce7f6172a7f89654ea6c","description":null,"is_global_object":false,"name":"Purchase count report","prevent_archivation":false,"server":{"attributes_use_global_events":false,"columns":[],"customer_filter":{"filters":[],"formula":""},"event_filters":{"attributes":[{"filter":[],"type":"purchase_item"}],"date":{"absolute":false,"duration":{"count":14,"units":"days"},"enabled":true,"from_date":null,"offset":null,"to_date":null}},"metrics":[{"_id":null,"event_types":null,"format":"round(0)","formula":"A","is_formula":false,"members":[{"aggregation":"count","attribute":null,"customer_filter":{"filters":[],"formula":""},"date_filter":{"absolute":false,"duration":{"count":30,"units":"days"},"enabled":false,"from_date":null,"offset":null,"to_date":null},"event":{"filter":[],"type":"purchase_item"},"name":"count(view_item)","occurrence_per_customer":"first","type":"event"}],"modifiers":{"display":"default","summarize":{"average":false,"max":false,"min":false,"stddev":false,"sum":false,"variance":false},"visualization":{"type":"default"}},"name":"# items","type":"embedded_metric","value_filter":{"filters":[{"operands":[1],"operator":"greater than"}],"formula":"F0"}}],"rows":[{"attribute":{"property":"product_id","type":"property"},"event_type":"purchase_item","expand_lists":false,"format":"string","grouping":{"ascending":false,"number":9999,"type":"top"},"hide_null":true,"modifiers":[],"name":null,"type":"event"}]},"show_description_in_view":false,"tags":[]},"id":"5e7a8247296d38ff5e6e014d","type":"report"},{"data":{"all_exposing_properties":[],"archived":false,"client":{"chart_type":"column","color_theme":0,"display":"table","items_per_page":50,"order_column":1,"order_direction":"desc","page":1,"report_type":"report","series_settings":[]},"cloned_from_id":"5e74d7a98b120f30971015d3","description":null,"is_global_object":false,"name":"Shipment count report","prevent_archivation":false,"server":{"attributes_use_global_events":false,"columns":[],"customer_filter":{"filters":[],"formula":""},"event_filters":{"attributes":[{"filter":[],"type":"purchase_item"}],"date":{"absolute":false,"duration":{"count":14,"units":"days"},"enabled":true,"from_date":null,"offset":null,"to_date":null}},"metrics":[{"_id":null,"event_types":null,"format":"round(0)","formula":"A","is_formula":false,"members":[{"aggregation":"count","attribute":null,"customer_filter":{"filters":[],"formula":""},"date_filter":{"absolute":false,"duration":{"count":30,"units":"days"},"enabled":false,"from_date":null,"offset":null,"to_date":null},"event":{"filter":[],"type":"purchase_item"},"name":"count(view_item)","occurrence_per_customer":"first","type":"event"}],"modifiers":{"display":"default","summarize":{"average":false,"max":false,"min":false,"stddev":false,"sum":false,"variance":false},"visualization":{"type":"default"}},"name":"# items","type":"embedded_metric","value_filter":{"filters":[{"operands":[1],"operator":"greater than"}],"formula":"F0"}}],"rows":[{"attribute":{"property":"product_id","type":"property"},"event_type":"purchase_item","expand_lists":false,"format":"string","grouping":{"ascending":false,"number":9999,"type":"top"},"hide_null":true,"modifiers":[],"name":null,"type":"event"}]},"show_description_in_view":false,"tags":[]},"id":"5e7a8247296d38ff5e6e0153","type":"report"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e74ce7f6172a7f89654ea5a","consent_category":null,"control_group":{"script":"var viewThreshold = [[limit_wyswietlen]];\nvar count = parseInt(\"{{ report_value_by_key('5c73c607f2320700195a30df', params.product_id) or 0 }}\");\nif (count < viewThreshold) {\n return; \n}\n\nvar self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname\n };\n}","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"Purchase count banner","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<a class=\"exponea-banner exponea-notification-1\" style=\"cursor: default;\" href=\"[[ bannerLink ]]\" id=\"exponea-socialproof\">\r\n <span class=\"exponea-text\">[[ notificationTextBefore ]] {{ report_value_by_key('5e7a8247296d38ff5e6e014d', params.product_id) }} [[ notificationTextAfter ]]\r\n </span>\r\n</a>","id":0,"name":"Variant A","parametrized_parts":{"html":"<a class=\"exponea-banner exponea-notification-1\" style=\"cursor: default;\" href=\"\" id=\"exponea-socialproof\">\r\n <span class=\"exponea-text\">This item recently got way more popular! {{ report_value_by_key('5e7a8247296d38ff5e6e014d', params.product_id) }} people bought it in the last 2 weeks\r\n </span>\r\n</a>","script":"var viewThreshold = 5;\r\nvar count = parseInt(\"{{ report_value_by_key('5e7a8247296d38ff5e6e014d', params.product_id) or 0 }}\");\r\nif (count < viewThreshold) {\r\n return; \r\n}\r\n\r\nvar self = this;\r\nvar showDelay = parseInt('100' || '0', 10);\r\nvar hideDelay = parseInt('5500' || '0', 10);\r\n\r\nsetTimeout(function () {\r\n self.sdk.track('banner', getEventProperties('show', false));\r\n requestAnimationFrame(function () {\r\n document.body.insertAdjacentHTML('beforeend', self.html);\r\n var banner = self.banner = document.querySelector(`.exponea-notification-1`);\r\n console.log(banner);\r\n banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\r\n var btnClose = banner.querySelector('.exponea-close');\r\n self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\r\n requestAnimationFrame(function () {\r\n document.querySelector(`.exponea-notification-1`).className += ' exponea-animate';\r\n });\r\n btnClose.onclick = function (e) {\r\n removeBanner();\r\n self.sdk.track('banner', getEventProperties('close'));\r\n e.preventDefault();\r\n if (e.stopPropagation) {\r\n e.stopPropagation();\r\n } else {\r\n e.cancelBubble = true;\r\n }\r\n return false;\r\n }\r\n });\r\n}, showDelay);\r\n\r\nsetTimeout(function() { \r\n\t$('#exponea-socialproof').fadeOut();\r\n}, 12000);\r\n\r\nsetTimeout(function () {\r\n\tremoveBanner();\r\n}, hideDelay);\r\n\r\nfunction getEventProperties(action, interactive) {\r\n return {\r\n action: action,\r\n banner_id: self.data.banner_id,\r\n banner_name: self.data.banner_name,\r\n banner_type: self.data.banner_type,\r\n variant_id: self.data.variant_id,\r\n variant_name: self.data.variant_name,\r\n interaction: interactive !== false ? true : false,\r\n location: window.location.href,\r\n path: window.location.pathname\r\n };\r\n}\r\n\r\nfunction removeBanner() {\r\n if (self.banner) {\r\n self.banner.parentNode.removeChild(self.banner);\r\n }\r\n}\r\nreturn {\r\n remove: removeBanner\r\n};","sdk_object_name":"exponea","style":".exponea-notification-1 {\r\n display: block;\r\n position: fixed;\r\n left: -100px;\r\n top: 300px;\r\n max-width: 250px;\r\n z-index: 9999999;\r\n background: #00b7db;\r\n transition: all 0.7s;\r\n font-family: Arial, Helvetica, sans-serif;\r\n text-align: left;\r\n line-height: normal;\r\n text-decoration: inherit;\r\n cursor: pointer;\r\n padding: 25px;\r\n}\r\n\r\n.exponea-notification-1,\r\n.exponea-notification-1 * {\r\n box-sizing: content-box;\r\n}\r\n\r\n.exponea-notification-1:hover,\r\n.exponea-notification-1:active {\r\n text-decoration: inherit;\r\n}\r\n\r\n.exponea-notification-1.exponea-animate {\r\n left: 30px;\r\n}\r\n\r\n.exponea-notification-1 span {\r\n display: block;\r\n}\r\n\r\n.exponea-notification-1 .exponea-text {\r\n font-size: 14px;\r\n font-weight: normal;\r\n color: #ffffff;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close {\r\n padding: 15px;\r\n position: absolute;\r\n top: -5px;\r\n right: -5px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross {\r\n position: absolute;\r\n display: inline-block;\r\n width: 10px;\r\n height: 10px;\r\n overflow: hidden;\r\n top: 10px;\r\n right: 10px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close:hover {\r\n cursor: pointer;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before,\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n content: '';\r\n position: absolute;\r\n height: 2px;\r\n width: 100%;\r\n top: 50%;\r\n left: 0;\r\n margin-top: -1px;\r\n background: #1c1733;\r\n height: 1px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before {\r\n -webkit-transform: rotate(45deg);\r\n transform: rotate(45deg);\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n -webkit-transform: rotate(45deg);\r\n transform: rotate(-45deg);\r\n}\r\n"},"params":{"backgroundColor":"#00b7db","bannerHideDelayInMilliseconds":"5500","bannerNumber":"1","bannerShowDelayInMilliseconds":"100","bodyText":"Subscribe now and get 50% discount for first three months.","bodyTextColor":"#ffffff","buttonBackgroundColor":"#1c1733","buttonText":"Subscribe","buttonTextColor":"#ffffff","closeButtonColor":"#1c1733","count_threshold":"5","headerText":"MyNews.com","headerTextColor":"#1c1733","limit_wyswietlen":"0","notificationText":"DOBRY WYBÓR... \nTen produkt ogląda xxx klientów","notificationText2":"","notificationTextAfter":"people bought it in the last 2 weeks","notificationTextBefore":"This item recently got way more popular!","notificationTextColor":"#ffffff","product_view_report_id":"5e7a8247296d38ff5e6e014d","sliderNumber":"1","view_report_id":"5dd12e0e9a51ca5558430a73","view_threshold":"5"},"percentage":100,"script":"var viewThreshold = [[count_threshold]];\r\nvar count = parseInt(\"{{ report_value_by_key('5e7a8247296d38ff5e6e014d', params.product_id) or 0 }}\");\r\nif (count < viewThreshold) {\r\n return; \r\n}\r\n\r\nvar self = this;\r\nvar showDelay = parseInt('[[ bannerShowDelayInMilliseconds ]]' || '0', 10);\r\nvar hideDelay = parseInt('[[ bannerHideDelayInMilliseconds ]]' || '0', 10);\r\n\r\nsetTimeout(function () {\r\n self.sdk.track('banner', getEventProperties('show', false));\r\n requestAnimationFrame(function () {\r\n document.body.insertAdjacentHTML('beforeend', self.html);\r\n var banner = self.banner = document.querySelector(`.exponea-notification-1`);\r\n console.log(banner);\r\n banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\r\n var btnClose = banner.querySelector('.exponea-close');\r\n self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\r\n requestAnimationFrame(function () {\r\n document.querySelector(`.exponea-notification-1`).className += ' exponea-animate';\r\n });\r\n btnClose.onclick = function (e) {\r\n removeBanner();\r\n self.sdk.track('banner', getEventProperties('close'));\r\n e.preventDefault();\r\n if (e.stopPropagation) {\r\n e.stopPropagation();\r\n } else {\r\n e.cancelBubble = true;\r\n }\r\n return false;\r\n }\r\n });\r\n}, showDelay);\r\n\r\nsetTimeout(function() { \r\n\t$('#exponea-socialproof').fadeOut();\r\n}, 12000);\r\n\r\nsetTimeout(function () {\r\n\tremoveBanner();\r\n}, hideDelay);\r\n\r\nfunction getEventProperties(action, interactive) {\r\n return {\r\n action: action,\r\n banner_id: self.data.banner_id,\r\n banner_name: self.data.banner_name,\r\n banner_type: self.data.banner_type,\r\n variant_id: self.data.variant_id,\r\n variant_name: self.data.variant_name,\r\n interaction: interactive !== false ? true : false,\r\n location: window.location.href,\r\n path: window.location.pathname\r\n };\r\n}\r\n\r\nfunction removeBanner() {\r\n if (self.banner) {\r\n self.banner.parentNode.removeChild(self.banner);\r\n }\r\n}\r\nreturn {\r\n remove: removeBanner\r\n};","source_mode":true,"style":".exponea-notification-1 {\r\n display: block;\r\n position: fixed;\r\n left: -100px;\r\n top: 300px;\r\n max-width: 250px;\r\n z-index: 9999999;\r\n background: [[ backgroundColor ]];\r\n transition: all 0.7s;\r\n font-family: Arial, Helvetica, sans-serif;\r\n text-align: left;\r\n line-height: normal;\r\n text-decoration: inherit;\r\n cursor: pointer;\r\n padding: 25px;\r\n}\r\n\r\n.exponea-notification-1,\r\n.exponea-notification-1 * {\r\n box-sizing: content-box;\r\n}\r\n\r\n.exponea-notification-1:hover,\r\n.exponea-notification-1:active {\r\n text-decoration: inherit;\r\n}\r\n\r\n.exponea-notification-1.exponea-animate {\r\n left: 30px;\r\n}\r\n\r\n.exponea-notification-1 span {\r\n display: block;\r\n}\r\n\r\n.exponea-notification-1 .exponea-text {\r\n font-size: 14px;\r\n font-weight: normal;\r\n color: [[ notificationTextColor ]];\r\n}\r\n\r\n.exponea-notification-1 .exponea-close {\r\n padding: 15px;\r\n position: absolute;\r\n top: -5px;\r\n right: -5px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross {\r\n position: absolute;\r\n display: inline-block;\r\n width: 10px;\r\n height: 10px;\r\n overflow: hidden;\r\n top: 10px;\r\n right: 10px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close:hover {\r\n cursor: pointer;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before,\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n content: '';\r\n position: absolute;\r\n height: 2px;\r\n width: 100%;\r\n top: 50%;\r\n left: 0;\r\n margin-top: -1px;\r\n background: [[ closeButtonColor ]];\r\n height: 1px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before {\r\n -webkit-transform: rotate(45deg);\r\n transform: rotate(45deg);\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n -webkit-transform: rotate(45deg);\r\n transform: rotate(-45deg);\r\n}\r\n","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7a8247296d38ff5e6e0137","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e74ce7f6172a7f89654ea5a","consent_category":null,"control_group":{"script":"var viewThreshold = [[limit_wyswietlen]];\nvar count = parseInt(\"{{ report_value_by_key('5c73c607f2320700195a30df', params.product_id) or 0 }}\");\nif (count < viewThreshold) {\n return; \n}\n\nvar self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname\n };\n}","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"Shipment count banner","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<a class=\"exponea-banner exponea-notification-1\" style=\"cursor: default;\" href=\"[[ bannerLink ]]\" id=\"exponea-socialproof\">\r\n <span class=\"exponea-text\">[[ notificationTextBefore ]] {{ report_value_by_key('5e7a8247296d38ff5e6e0153', params.product_id) }} [[ notificationTextAfter ]]\r\n </span>\r\n</a>","id":0,"name":"Variant A","parametrized_parts":{"html":"<a class=\"exponea-banner exponea-notification-1\" style=\"cursor: default;\" href=\"\" id=\"exponea-socialproof\">\r\n <span class=\"exponea-text\">This item recently got way more popular! It got safely delivered to {{ report_value_by_key('5e7a8247296d38ff5e6e0153', params.product_id) }} customers in the last 2 weeks\r\n </span>\r\n</a>","script":"var viewThreshold = 5;\r\nvar count = parseInt(\"{{ report_value_by_key('5e7a8247296d38ff5e6e0153', params.product_id) or 0 }}\");\r\nif (count < viewThreshold) {\r\n return; \r\n}\r\n\r\nvar self = this;\r\nvar showDelay = parseInt('100' || '0', 10);\r\nvar hideDelay = parseInt('5500' || '0', 10);\r\n\r\nsetTimeout(function () {\r\n self.sdk.track('banner', getEventProperties('show', false));\r\n requestAnimationFrame(function () {\r\n document.body.insertAdjacentHTML('beforeend', self.html);\r\n var banner = self.banner = document.querySelector(`.exponea-notification-1`);\r\n console.log(banner);\r\n banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\r\n var btnClose = banner.querySelector('.exponea-close');\r\n self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\r\n requestAnimationFrame(function () {\r\n document.querySelector(`.exponea-notification-1`).className += ' exponea-animate';\r\n });\r\n btnClose.onclick = function (e) {\r\n removeBanner();\r\n self.sdk.track('banner', getEventProperties('close'));\r\n e.preventDefault();\r\n if (e.stopPropagation) {\r\n e.stopPropagation();\r\n } else {\r\n e.cancelBubble = true;\r\n }\r\n return false;\r\n }\r\n });\r\n}, showDelay);\r\n\r\nsetTimeout(function() { \r\n\t$('#exponea-socialproof').fadeOut();\r\n}, 7000);\r\n\r\nsetTimeout(function () {\r\n\tremoveBanner();\r\n}, hideDelay);\r\n\r\nfunction getEventProperties(action, interactive) {\r\n return {\r\n action: action,\r\n banner_id: self.data.banner_id,\r\n banner_name: self.data.banner_name,\r\n banner_type: self.data.banner_type,\r\n variant_id: self.data.variant_id,\r\n variant_name: self.data.variant_name,\r\n interaction: interactive !== false ? true : false,\r\n location: window.location.href,\r\n path: window.location.pathname\r\n };\r\n}\r\n\r\nfunction removeBanner() {\r\n if (self.banner) {\r\n self.banner.parentNode.removeChild(self.banner);\r\n }\r\n}\r\nreturn {\r\n remove: removeBanner\r\n};","sdk_object_name":"exponea","style":".exponea-notification-1 {\r\n display: block;\r\n position: fixed;\r\n left: -100px;\r\n top: 300px;\r\n max-width: 250px;\r\n z-index: 9999999;\r\n background: #00b7db;\r\n transition: all 0.7s;\r\n font-family: Arial, Helvetica, sans-serif;\r\n text-align: left;\r\n line-height: normal;\r\n text-decoration: inherit;\r\n cursor: pointer;\r\n padding: 25px;\r\n}\r\n\r\n.exponea-notification-1,\r\n.exponea-notification-1 * {\r\n box-sizing: content-box;\r\n}\r\n\r\n.exponea-notification-1:hover,\r\n.exponea-notification-1:active {\r\n text-decoration: inherit;\r\n}\r\n\r\n.exponea-notification-1.exponea-animate {\r\n left: 30px;\r\n}\r\n\r\n.exponea-notification-1 span {\r\n display: block;\r\n}\r\n\r\n.exponea-notification-1 .exponea-text {\r\n font-size: 14px;\r\n font-weight: normal;\r\n color: #ffffff;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close {\r\n padding: 15px;\r\n position: absolute;\r\n top: -5px;\r\n right: -5px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross {\r\n position: absolute;\r\n display: inline-block;\r\n width: 10px;\r\n height: 10px;\r\n overflow: hidden;\r\n top: 10px;\r\n right: 10px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close:hover {\r\n cursor: pointer;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before,\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n content: '';\r\n position: absolute;\r\n height: 2px;\r\n width: 100%;\r\n top: 50%;\r\n left: 0;\r\n margin-top: -1px;\r\n background: #1c1733;\r\n height: 1px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before {\r\n -webkit-transform: rotate(45deg);\r\n transform: rotate(45deg);\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n -webkit-transform: rotate(45deg);\r\n transform: rotate(-45deg);\r\n}\r\n"},"params":{"backgroundColor":"#00b7db","bannerHideDelayInMilliseconds":"5500","bannerNumber":"1","bannerShowDelayInMilliseconds":"100","bodyText":"Subscribe now and get 50% discount for first three months.","bodyTextColor":"#ffffff","buttonBackgroundColor":"#1c1733","buttonText":"Subscribe","buttonTextColor":"#ffffff","closeButtonColor":"#1c1733","count_threshold":"5","headerText":"MyNews.com","headerTextColor":"#1c1733","limit_wyswietlen":"0","notificationText":"DOBRY WYBÓR... \nTen produkt ogląda xxx klientów","notificationText2":"","notificationTextAfter":"customers in the last 2 weeks","notificationTextBefore":"This item recently got way more popular! It got safely delivered to","notificationTextColor":"#ffffff","product_view_report_id":"5e7a8247296d38ff5e6e014d","sliderNumber":"1","view_report_id":"5dd12e0e9a51ca5558430a73","view_threshold":"5"},"percentage":100,"script":"var viewThreshold = [[count_threshold]];\r\nvar count = parseInt(\"{{ report_value_by_key('5e7a8247296d38ff5e6e0153', params.product_id) or 0 }}\");\r\nif (count < viewThreshold) {\r\n return; \r\n}\r\n\r\nvar self = this;\r\nvar showDelay = parseInt('[[ bannerShowDelayInMilliseconds ]]' || '0', 10);\r\nvar hideDelay = parseInt('[[ bannerHideDelayInMilliseconds ]]' || '0', 10);\r\n\r\nsetTimeout(function () {\r\n self.sdk.track('banner', getEventProperties('show', false));\r\n requestAnimationFrame(function () {\r\n document.body.insertAdjacentHTML('beforeend', self.html);\r\n var banner = self.banner = document.querySelector(`.exponea-notification-1`);\r\n console.log(banner);\r\n banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\r\n var btnClose = banner.querySelector('.exponea-close');\r\n self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\r\n requestAnimationFrame(function () {\r\n document.querySelector(`.exponea-notification-1`).className += ' exponea-animate';\r\n });\r\n btnClose.onclick = function (e) {\r\n removeBanner();\r\n self.sdk.track('banner', getEventProperties('close'));\r\n e.preventDefault();\r\n if (e.stopPropagation) {\r\n e.stopPropagation();\r\n } else {\r\n e.cancelBubble = true;\r\n }\r\n return false;\r\n }\r\n });\r\n}, showDelay);\r\n\r\nsetTimeout(function() { \r\n\t$('#exponea-socialproof').fadeOut();\r\n}, 7000);\r\n\r\nsetTimeout(function () {\r\n\tremoveBanner();\r\n}, hideDelay);\r\n\r\nfunction getEventProperties(action, interactive) {\r\n return {\r\n action: action,\r\n banner_id: self.data.banner_id,\r\n banner_name: self.data.banner_name,\r\n banner_type: self.data.banner_type,\r\n variant_id: self.data.variant_id,\r\n variant_name: self.data.variant_name,\r\n interaction: interactive !== false ? true : false,\r\n location: window.location.href,\r\n path: window.location.pathname\r\n };\r\n}\r\n\r\nfunction removeBanner() {\r\n if (self.banner) {\r\n self.banner.parentNode.removeChild(self.banner);\r\n }\r\n}\r\nreturn {\r\n remove: removeBanner\r\n};","source_mode":true,"style":".exponea-notification-1 {\r\n display: block;\r\n position: fixed;\r\n left: -100px;\r\n top: 300px;\r\n max-width: 250px;\r\n z-index: 9999999;\r\n background: [[ backgroundColor ]];\r\n transition: all 0.7s;\r\n font-family: Arial, Helvetica, sans-serif;\r\n text-align: left;\r\n line-height: normal;\r\n text-decoration: inherit;\r\n cursor: pointer;\r\n padding: 25px;\r\n}\r\n\r\n.exponea-notification-1,\r\n.exponea-notification-1 * {\r\n box-sizing: content-box;\r\n}\r\n\r\n.exponea-notification-1:hover,\r\n.exponea-notification-1:active {\r\n text-decoration: inherit;\r\n}\r\n\r\n.exponea-notification-1.exponea-animate {\r\n left: 30px;\r\n}\r\n\r\n.exponea-notification-1 span {\r\n display: block;\r\n}\r\n\r\n.exponea-notification-1 .exponea-text {\r\n font-size: 14px;\r\n font-weight: normal;\r\n color: [[ notificationTextColor ]];\r\n}\r\n\r\n.exponea-notification-1 .exponea-close {\r\n padding: 15px;\r\n position: absolute;\r\n top: -5px;\r\n right: -5px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross {\r\n position: absolute;\r\n display: inline-block;\r\n width: 10px;\r\n height: 10px;\r\n overflow: hidden;\r\n top: 10px;\r\n right: 10px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close:hover {\r\n cursor: pointer;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before,\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n content: '';\r\n position: absolute;\r\n height: 2px;\r\n width: 100%;\r\n top: 50%;\r\n left: 0;\r\n margin-top: -1px;\r\n background: [[ closeButtonColor ]];\r\n height: 1px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before {\r\n -webkit-transform: rotate(45deg);\r\n transform: rotate(45deg);\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n -webkit-transform: rotate(45deg);\r\n transform: rotate(-45deg);\r\n}\r\n","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b16e94f21d3b453e365bb","type":"banner"},{"data":{"archived":false,"cloned_from_id":"5e74ce7f6172a7f89654ea65","consent_category":null,"customer_filter":{"filters":[{"attribute":{"id":"cookie","type":"id"},"constraint":{"constraint":{"operands":[{"type":"constant","value":"4974264d-82d0-4516-90cb-8d0d146472b8"}],"operator":"equals","type":"string"},"operands":[],"operator":"contains matching","quantifier":"any","type":"list"},"type":"attribute"}],"formula":"A"},"definition":"/* ACTION REQUIRED: Customize the container above to get the product_id on your product page */\n\nvar product_id = [[productIdContainer]];\n\nif ([[launchShipmentCount]] == 1){\n\tif (product_id) {\n exponea.showBanner('5e7b16e94f21d3b453e365bb', { \"product_id\": product_id });\n\t}\n}\n\nelse if ([[launchPurchaseCount]] == 1){\n\tif (product_id) {\n exponea.showBanner('5e7a8247296d38ff5e6e0137', { \"product_id\": product_id });\n\t}\n}","description":null,"general_consent":true,"is_constant":false,"is_global_object":false,"load_priority":null,"name":"Social proof trigger","parametrized_definition":"/* ACTION REQUIRED: Customize the container above to get the product_id on your product page */\n\nvar product_id = dataLayer[1].ecommerce.detail.products[0].id;\n\nif (0 == 1){\n\tif (product_id) {\n exponea.showBanner('5e7b16e94f21d3b453e365bb', { \"product_id\": product_id });\n\t}\n}\n\nelse if (1 == 1){\n\tif (product_id) {\n exponea.showBanner('5e7a8247296d38ff5e6e0137', { \"product_id\": product_id });\n\t}\n}","params":{"launchPurchaseCount":"1","launchShipmentCount":"0","productIdContainer":"dataLayer[1].ecommerce.detail.products[0].id"},"preset_id":null,"prevent_archivation":false,"show_description_in_view":false,"status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"type":"js","uses_overlay":false},"id":"5e7a8247296d38ff5e6e0147","type":"managed_tag"},{"data":{"archived":false,"cloned_from_id":"5e74ce7f6172a7f89654ea60","components":[{"evaluate":false,"position":{"height":{"type":"fixed","value":9},"width":12,"x":0,"y":0},"project_id":"f0ddd9fe-6751-11e9-aed1-0a580a203507","text":"<p><strong>Purchase Count / Shipment Count Weblayers</strong></p>\n\n<p>Documentation for similar view count banner: <a href=\"https://docs.exponea.com/docs/view-count-banner\">https://docs.exponea.com/docs/view-count-banner</a></p>\n\n<p>You can find how to launch this use case <a href=\"https://docs.google.com/document/d/1gBYU-LLdEh7CNRhhVCmZFRWFZJs--1PR2B9YlE7oIYs/edit?usp=sharing\">in this walkthrough</a></p>\n","type":"html"}],"filters":{"attributes":[],"date_filter":{"absolute":false,"duration":{"count":30,"units":"days"},"enabled":false,"from_date":null,"offset":null,"to_date":null},"date_filter_override":false},"is_global_object":false,"name":"Readme","prevent_archivation":false,"tags":[],"used_project_ids":["f0ddd9fe-6751-11e9-aed1-0a580a203507"]},"id":"5e7a8247296d38ff5e6e0142","type":"dashboard"}],"version":"v1.164.11"}
It might not be possible to import the JSON file if your Exponea instance has not gone through the release 1.164 yet.
Launching the Social Proof Banner
- Go to the "Social Proof Trigger" tag under
Data & Assets>Tag Managerand customize the part where you getproduct_ididentifier from dataLayer
-
If you would like to assure quality, you can first launch the web layer only for test users: "Social Proof Trigger" tag >
Settings tab>Customer filtersection where you can select your email address (if you’re signed in as a customer on your website) or your cookie ID. -
Launch the banner for all users
Updated 4 months ago