Announcement

Collapse
No announcement yet.

Trustpilot Integration

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    Thank you Norman
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    Comment


      #17
      Could someone explain what this integration does with regards to Trustpilot please? Sorry for my ignorance.
      Reusable Snore Earplugs : Sample Earplugs - Wax Earplugs - Women's Earplugs - Children's Earplugs - Music Earplugs - Sleep Masks

      Comment


        #18
        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&amp;currency_code=GBP&amp;label=EceyCMLEwQcQ7O645wM&amp;guid=ON&amp;script=0"/>
        </div>
        </noscript>
        
        </body>
        </html>
        Jonathan Chappell
        Website Designer
        SellerDeck Website Designer
        Actinic to SellerDeck upgrades
        Graphicz Limited - www.graphicz.co.uk

        Comment


          #19
          Thanks Jonathan. So I wouldn't use it for, say, soliciting services reviews?
          Reusable Snore Earplugs : Sample Earplugs - Wax Earplugs - Women's Earplugs - Children's Earplugs - Music Earplugs - Sleep Masks

          Comment


            #20
            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 -->
            2. The TrustBox widget

            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 -->
            Variation OFF (visibility 49%)
            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 -->
            There are three optional variables you can send with the conversion tracking.
            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.com
            Jonathan Chappell
            Website Designer
            SellerDeck Website Designer
            Actinic to SellerDeck upgrades
            Graphicz Limited - www.graphicz.co.uk

            Comment


              #21
              Thanks again Jonathan. We already have a Trustbox so it should be fairly easy to use your other code to track the conversions.
              Reusable Snore Earplugs : Sample Earplugs - Wax Earplugs - Women's Earplugs - Children's Earplugs - Music Earplugs - Sleep Masks

              Comment


                #22
                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 Post
                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&amp;currency_code=GBP&amp;label=EceyCMLEwQcQ7O645wM&amp;guid=ON&amp;script=0"/>
                </div>
                </noscript>
                
                </body>
                </html>
                Regards
                David

                www.theoriginalsin.co.uk
                Website Design & Development

                Comment


                  #23
                  Hi David

                  The key phase is
                  This is the code that Trustpilot sent
                  I am no expert, just copied and pasted at te time. Sorry I cannot help further

                  Stack Overflow is helpful - probably an incorect path:

                  https://stackoverflow.com/questions/...ptions-nosniff

                  We cannot test your URL because of the xxxxx's
                  Jonathan Chappell
                  Website Designer
                  SellerDeck Website Designer
                  Actinic to SellerDeck upgrades
                  Graphicz Limited - www.graphicz.co.uk

                  Comment


                    #24
                    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

                    www.theoriginalsin.co.uk
                    Website Design & Development

                    Comment


                      #25
                      trying to get the client's name from the variable <actinic:variable name="InvoiceName" />
                      Add a unique class-name to whatever displays that field. Then you can get at the contents via SD's built-in jQuery:
                      Code:
                      $( ".uniqueclassname" ).text()
                      Norman - www.drillpine.biz
                      Edinburgh, U K / Bitez, Turkey

                      Comment


                        #26
                        Originally posted by NormanRouxel View Post
                        Add a unique class-name to whatever displays that field. Then you can get at the contents via SD's built-in jQuery:
                        Code:
                        $( ".uniqueclassname" ).text()
                        Excellent - sometimes you just need to be pointed in the right direction
                        Regards
                        David

                        www.theoriginalsin.co.uk
                        Website Design & Development

                        Comment


                          #27
                          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>
                          3. Sellerdeck > Design > Library > Layouts > For Outdoors > Create New Layout: Trustpilot Conversion 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>
                          4. Add the 'Trustpilot Header Script' and 'Trustpilot Conversion Script' layouts to the 'Trustpilot' selector

                          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 Script
                          Regards
                          David

                          www.theoriginalsin.co.uk
                          Website Design & Development

                          Comment

                          Working...
                          X