Thank you Norman
Announcement
Collapse
No announcement yet.
Trustpilot Integration
Collapse
X
-
Jonathan Chappell
Website Designer
SellerDeck Website Designer
Actinic to SellerDeck upgrades
Graphicz Limited - www.graphicz.co.uk
-
Hi Jules
This is the code that Trustpilot sent to the client for inclusion on the Receipt page to track conversion.
It sits above the existing "Google Code for Sale Conversion Page" at the bottom of the Receipt page.
So the code of the receipt page will look like this:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title><actinic:variable name="PageTitle" /></title> <actinic:variable name="BaseHref" /> <actinic:variable name="MetaTags" /> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsP3PPolicyUsed%22%20%2f%3e"><link rel="P3Pv1" href="<actinic:variable name="P3PFullPolicyLink" />"></actinic:block> <link href="actinic.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="<actinic:variable name="CatalogURL" />/favicon.ico" type="image/x-icon" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <actinic:variable name="JavaScriptFunctions" /> <actinic:variable name="GoogleAnalyticsMarkup" value="Google Analytics Tracking Code" /> </head> <body class="receipt" style="background-image:none"> <actinic:variable name="GoogleAnalyticsMarkup" value="Google Analytics Variable Setup" /> <actinic:variable name="INNERLAYOUT" /> <actinic:block if="%3cactinic%3avariable%20name%3d%22RecentlyViewedListIsEnabled%22%20%2f%3e%20%3d%3d%20True" > <actinic:variable name="RecentProducts" /> </actinic:block> <actinic:variable name="GoogleAnalyticsMarkup" value="Google Analytics Order Transmission" /> <!-- Trustpilot conversion script --> <script type="text/javascript"> // SellerDeck tweaks start // SellerDeck amount may have £ sign and thousand commas function getcartamount(){ return ('<Actinic:Variable Name="Total"/>').replace(/[^0-9\.]/g, ''); } // we've added a cartqtyfield class-name to the Qty field in the checkout function getcarttotalitems(){ var basket_size = 0; $( ".cartqtyfield" ).each(function(){ var itemcount = $(this).text(); if ( ! isNaN(itemcount) ) { basket_size += itemcount - 0; } }); return basket_size; } // SellerDeck tweaks end // TP code continues (function(c,o,n,v,e,r,t){c['TPConversionObject']=e;c[e]=c[e]||function(){c[e].buid='xxxxxxxxxxxxxxxxxxxxxxxx',(c[e].q=c[e].q||[]).push(arguments)};r=o.createElement(n),t=o.getElementsByTagName(n)[0];r.async=1;r.src=v;t.parentNode.insertBefore(r,t)})(window,document,'script','https://widget.trustpilot.com/conversion/conversion.js','tpConversion'); tpConversion('amount', getcartamount()); // total cost of the order, eg. '13.00' tpConversion('currency', 'GBP'); // your shop's currency, e.g. USD tpConversion('basket_size', getcarttotalitems()); // total number of items purchased </script> <!-- End Trustpilot conversion script --> <!-- Google Code for Sale Conversion Page --> <script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = xxxxxxxxxx; var google_conversion_language = "en"; var google_conversion_format = "3"; var google_conversion_color = "ffffff"; var google_conversion_label = "EceyCMLEwQcQ7O645wM"; var google_conversion_value = 1.00; var google_conversion_currency = "GBP"; var google_remarketing_only = false; /* ]]> */ </script> <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/xxxxxxxxxx/?value=1.00&currency_code=GBP&label=EceyCMLEwQcQ7O645wM&guid=ON&script=0"/> </div> </noscript> </body> </html>
Jonathan Chappell
Website Designer
SellerDeck Website Designer
Actinic to SellerDeck upgrades
Graphicz Limited - www.graphicz.co.uk
Comment
-
I am flattered that you think I know stuff!
Here is what the client sent me (anonymised) It also has some links to further info:
(xxxxxxxxxxxxxxxxxxxxxxx is your Trustpilot ID)
Implementing TrustBoxes on your site
Implementing TrustBoxes is done by inserting three snippets into the HTML of your website.
Please paste the snippets as they are, because any change to the code might cause problems with the TrustBox.
IMPORTANT: Please ensure you have removed the code snippets from any previous test before starting a new one! Guide for stopping a test. https://support.trustpilot.com/hc/articles/235633748
1. The TrustBox script
Copy-paste this code inside the <head></head> section of your website’s HTML or as close to the top of the page as possible.
The script loads our bootstrap code that in turn finds any TrustBoxes on the page and initializes them. The TrustBox script will control the visibility of the different variations based on your test settings.
Only include this script once per page.
Code:<!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script> <!-- End Trustbox script -->
Copy-paste the code below inside the <body></body> section of your website code where you want the TrustBox to appear. Our bootstrap inserts an <iframe> element in the <div> and this is where the actual TrustBox content will show up.
There may be several tags like this per page. One for each TrustBox you want on your page. Your visitors will see only one variation at a time, based on your test settings.
Variation A (visibility 51%)
Code:<!-- TrustBox widget - List --> <div class="trustpilot-widget" data-locale="en-GB" data-template-id="539ad60defb9600b94d7df2c" data-businessunit-id="xxxxxxxxxxxxxxxxxxxxxxxx" data-style-height="500px" data-style-width="100%" data-group="a" data-stars="1,2,3,4,5"> <a href="https://uk.trustpilot.com/review/xxxxxxxxxxxxx.co.uk" target="_blank">Trustpilot</a> </div> <!-- End TrustBox widget -->
No additional code needed.
3. Conversion tracking script
Implement the code below at the point of conversion, i.e. the point where a visitor of your site completes a desired goal such as completing a purchase or filling out a form. This script sends a conversion event, and the data we collect is used to measure and report on the impact a TrustBox has on your online business. If you want to see an impact on revenue as well, make sure you populate the additional conversion parameters fields with the order details (recommended).
Only include this script once. It can be positioned either in the <head> or <body>, depending on what fits you best.
Code:<!-- Trustpilot conversion script --> <script type="text/javascript"> (function(c,o,n,v,e,r,t){c['TPConversionObject']=e;c[e]=c[e]||function(){c[e].buid='xxxxxxxxxxxxxxxxxxxxxxx',(c[e].q=c[e].q||[]).push(arguments)};r=o.createElement(n),t=o.getElementsByTagName(n)[0];r.async=1;r.src=v;t.parentNode.insertBefore(r,t)})(window,document,'script','https://widget.trustpilot.com/conversion/conversion.js','tpConversion'); tpConversion('amount', '[ORDER_TOTAL]'); // total cost of the order, eg. '13.00' tpConversion('currency', '[CURRENCY]'); // your shop's currency, e.g. USD tpConversion('basket_size', '[BASKET_SIZE]'); // total number of items purchased </script> <!-- End Trustpilot conversion script -->
Data type Example
ORDER_TOTAL Number 20129.95 (use . as decimal separator)
CURRENCY String USD
BASKET_SIZE Number 3
Learn more about the TrustBox Optimizer and how to run a Conversion Optimization Test. https://support.trustpilot.com/hc/articles/235633748
Support
If you'd like more details about the TrustBoxes, check out the detailed documentation. https://support.trustpilot.com/hc/sections/200373313
If you have questions or need help with the implementation, we can be reached here: https://support.trustpilot.comJonathan Chappell
Website Designer
SellerDeck Website Designer
Actinic to SellerDeck upgrades
Graphicz Limited - www.graphicz.co.uk
Comment
-
Hi - is this code still valid?
I have installed it on my website, run it in Firefox, and the debug console displays the following error:
Code:The resource from “https://widget.trustpilot.com/stats/TrustboxRevenue?currency=GBP&businessUnitId=xxxxxxxxxxx&url=https%3A%2F%2Fthezipwirecompany.com%2Fcgi-bin%2Fos000001.pl” was blocked due to MIME type (“”) mismatch (X-Content-Type-Options: nosniff).
Originally posted by graphicz View PostHi Jules
This is the code that Trustpilot sent to the client for inclusion on the Receipt page to track conversion.
It sits above the existing "Google Code for Sale Conversion Page" at the bottom of the Receipt page.
So the code of the receipt page will look like this:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title><actinic:variable name="PageTitle" /></title> <actinic:variable name="BaseHref" /> <actinic:variable name="MetaTags" /> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsP3PPolicyUsed%22%20%2f%3e"><link rel="P3Pv1" href="<actinic:variable name="P3PFullPolicyLink" />"></actinic:block> <link href="actinic.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="<actinic:variable name="CatalogURL" />/favicon.ico" type="image/x-icon" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <actinic:variable name="JavaScriptFunctions" /> <actinic:variable name="GoogleAnalyticsMarkup" value="Google Analytics Tracking Code" /> </head> <body class="receipt" style="background-image:none"> <actinic:variable name="GoogleAnalyticsMarkup" value="Google Analytics Variable Setup" /> <actinic:variable name="INNERLAYOUT" /> <actinic:block if="%3cactinic%3avariable%20name%3d%22RecentlyViewedListIsEnabled%22%20%2f%3e%20%3d%3d%20True" > <actinic:variable name="RecentProducts" /> </actinic:block> <actinic:variable name="GoogleAnalyticsMarkup" value="Google Analytics Order Transmission" /> <!-- Trustpilot conversion script --> <script type="text/javascript"> // SellerDeck tweaks start // SellerDeck amount may have £ sign and thousand commas function getcartamount(){ return ('<Actinic:Variable Name="Total"/>').replace(/[^0-9\.]/g, ''); } // we've added a cartqtyfield class-name to the Qty field in the checkout function getcarttotalitems(){ var basket_size = 0; $( ".cartqtyfield" ).each(function(){ var itemcount = $(this).text(); if ( ! isNaN(itemcount) ) { basket_size += itemcount - 0; } }); return basket_size; } // SellerDeck tweaks end // TP code continues (function(c,o,n,v,e,r,t){c['TPConversionObject']=e;c[e]=c[e]||function(){c[e].buid='xxxxxxxxxxxxxxxxxxxxxxxx',(c[e].q=c[e].q||[]).push(arguments)};r=o.createElement(n),t=o.getElementsByTagName(n)[0];r.async=1;r.src=v;t.parentNode.insertBefore(r,t)})(window,document,'script','https://widget.trustpilot.com/conversion/conversion.js','tpConversion'); tpConversion('amount', getcartamount()); // total cost of the order, eg. '13.00' tpConversion('currency', 'GBP'); // your shop's currency, e.g. USD tpConversion('basket_size', getcarttotalitems()); // total number of items purchased </script> <!-- End Trustpilot conversion script --> <!-- Google Code for Sale Conversion Page --> <script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = xxxxxxxxxx; var google_conversion_language = "en"; var google_conversion_format = "3"; var google_conversion_color = "ffffff"; var google_conversion_label = "EceyCMLEwQcQ7O645wM"; var google_conversion_value = 1.00; var google_conversion_currency = "GBP"; var google_remarketing_only = false; /* ]]> */ </script> <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/xxxxxxxxxx/?value=1.00&currency_code=GBP&label=EceyCMLEwQcQ7O645wM&guid=ON&script=0"/> </div> </noscript> </body> </html>
Regards
David
Comment
-
Hi David
The key phase isThis is the code that Trustpilot sent
Stack Overflow is helpful - probably an incorect path:
https://stackoverflow.com/questions/...ptions-nosniff
We cannot test your URL because of the xxxxx'sJonathan Chappell
Website Designer
SellerDeck Website Designer
Actinic to SellerDeck upgrades
Graphicz Limited - www.graphicz.co.uk
Comment
-
The code I got from Trustpilot is totally different from that in this forum.
I am near to a solution and will post it when fully working.
The only thing I have a problem with is trying to get the customer's name to pass to Trustpilot.
I am trying to get the client's name from the variable <actinic:variable name="InvoiceName" /> on the receipt page but embedded in this is a line break which splits it over 2 lines. I then get the following error when trying to allocate this as a javascript var:
Uncaught SyntaxError: '' string literal contains an unescaped line break
Weird bit of coding to include HTML and line breaks in a variable when the developers could have put in the template.Regards
David
- 1 like
Comment
-
trying to get the client's name from the variable <actinic:variable name="InvoiceName" />
Code:$( ".uniqueclassname" ).text()
Norman - www.drillpine.biz
Edinburgh, U K / Bitez, Turkey
- 2 likes
Comment
-
OK - this is what I've done - hopefully it may prove useful to someone in the future:
See: https://support.trustpilot.com/hc/en...pt-integration
Login into Trustpilot:
Obtain the required code from: Truspilot BO > Ecommerce > Javascript Integration
I am using the service review only and not the product review
In SellerDeck
1. Sellerdeck > Design > Library > Layouts > For Outdoors > Create New Selector: Trustpilot
2. Sellerdeck > Design > Library > Layouts > For Outdoors > Create New Layout: Trustpilot Header Script
Insert the following code (Replace xxxxxxxxxxxxxxxxxx with the unique identifier provided)
Code:<script> (function(w,d,s,r,n){w.TrustpilotObject=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)}; a=d.createElement(s);a.async=1;a.src=r;a.type='text/java'+s;f=d.getElementsByTagName(s)[0]; f.parentNode.insertBefore(a,f)})(window,document,'script', 'https://invitejs.trustpilot.com/tp.min.js', 'tp'); tp('register', 'xxxxxxxxxxxxxxxxxx'); </script>
Insert the following code:
Code:<actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e" > <!-- Create named containers to hold the SellerDeck variable's content --> <div id="sdName" style="display: none;"><actinic:variable name="InvoiceName" /></div> <div id="sdEmail" style="display: none;"><Actinic:Variable Name="InvoiceEmail"/></div> <!-- Trustpilot conversion script --> <script> document.addEventListener('DOMContentLoaded', function() { // Remove spurious character from SellerDeck variables var tpEmail = $("#sdEmail").text() tpEmail = tpEmail.replace('Email:',''); tpEmail = tpEmail.trim(); var tpName = $("#sdName").text() const trustpilot_invitation = { recipientEmail: tpEmail, recipientName: tpName, referenceId: '<Actinic:Variable Name="TheOrderNumber"/>', source: 'InvitationScript', }; tp('createInvitation', trustpilot_invitation); }); </script> <!-- End Trustpilot conversion script --> </actinic:block>
5. Insert Selector: Trustpilot in Sellerdeck > Design Tab > Select Page Type: Content Page > Layout Code: Standard Javascript Header Functions
Right-click and Edit Appearance > Other > Used Fixed Layout: Trustpilot Header Script
6. Insert Selector: Trustpilot in Sellerdeck > Design Tab > Select Page Type: Receipt > Layout Code: Receipt Page Layout (before closing </body> tag)
Right-click and Edit Appearance > Other > Used Fixed Layout: Trustpilot Conversion ScriptRegards
David
- 1 like
Comment
-
Just re-found this, thank you very much!Jonathan Chappell
Website Designer
SellerDeck Website Designer
Actinic to SellerDeck upgrades
Graphicz Limited - www.graphicz.co.uk
- 1 like
Comment
Comment