Integrating VWO With Volusion

Integrating VWO with your Volusion website allows you to create and run VWO tests on your web store. To enable integration with your Volusion website, you must first add VWO SmartCode to all the pages you want to test. After adding the code snippet to the relevant pages, you can create and run VWO tests to capture visitor data on your Volusion web store.

• Add VWO code to the test pages

• Enable revenue tracking

Add VWO Code the Test Pages

1. Sign in to your Volusion admin account of your web store.

2. Select the Design tab and then click File Editor.

3. In the Shortcuts panel on the File Editor page, click template_xxx.html (where xxx is the number or name of your Volusion store template).
   

4. In the Live Edit window that opens, search the first section of your template’s code to find the closing </head> tag marked. You can also press Ctrl+F to search for the term “</head>” on the page.

5. Paste the following Asynchronous VWO SmartCode into your Live Editor just above the </head> tag. Make sure to enter your Account ID in the var account_id value. Click here to learn how to add VWO SmartCode to your website.

   To check if you have correctly installed the SmartCode on your webpage, enter the URL in the SmartCode Checker in the Settings > SmartCode section of your VWO Account. See SmartCode Checker in VWO to know what different results mean.

   <!– Start VWO Asynchronous Code –>
   <script type='text/javascript'>
      var _vwo_code = (function() {
          var account_id = YOUR ACCOUNT ID HERE,
              settings_tolerance = 2000,
              library_tolerance = 2500,
              /* DO NOT EDIT BELOW THIS LINE */
              f = false,
              d = document;
          return {
              library_tolerance: function() {
                  return library_tolerance;
              },
              finish: function() {
                  if (!f) {
                      f = true;
                      var a = d.getElementById('_vis_opt_path_hides');
                      if (a) a.parentNode.removeChild(a);
                  }
              },
              finished: function() {
                  return f;
              },
              load: function(a) {
                  var b = d.createElement('script');
                  b.src = a;
                  b.type = 'text/javascript';
                  b.innerText;
                  b.onerror = function() {
                      _vwo_code.finish();
                  };
                  d.getElementsByTagName('head')[0].appendChild(b);
              },
              init: function() {
                  settings_timer = setTimeout('_vwo_code.finish()', settings_tolerance);
                  var a = d.createElement('style'),
                      b = 'body{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}',
                      h = d.getElementsByTagName('head')[0];
                  a.setAttribute('id', '_vis_opt_path_hides');
                  a.setAttribute('type', 'text/css');
                  if (a.styleSheet) a.styleSheet.cssText = b;
                  else a.appendChild(d.createTextNode(b));
                  h.appendChild(a);
                  this.load('//dev.visualwebsiteoptimizer.com/j.php?a=' + account_id + '&u=' + encodeURIComponent(d.URL) + '&r=' + Math.random());
                  return settings_timer;
              }
          };
      }());
      _vwo_settings_timer = _vwo_code.init();
   </script>
   <!– End VWO Asynchronous Code –>

   INFO: Your VWO account ID is present in the panel at the top of the VWO app.
6. Click Save.

Enable Revenue Tracking

6. Log in to the admin dashboard of your Volusion webstore, select Design, and click Site Content.

7. Scroll down till Article ID 130. If the article is not ID 130 in your store, use Search to find the article where Spot Key is ROI_Javascripts.

8. Click the Article ID.

9. In the Article Body field, click the HTML icon in the Easy Editor toolbar.

10. Enter or paste your script into the Article Body section and click Save. Click here to learn more about revenue tracking goal in VWO.

    <script type="text/javascript">
    
    var_vis_opt_revenue = "REPLACE_THIS_WITH_ACTUAL_REVENUE";
    
    window._vis_opt_queue = window._vis_opt_queue || [];
    
    window._vis_opt_queue.push(function() {
    
    _vis_opt_revenue_conversion(_vis_opt_revenue);
    
    });
    
    window.VWO = window.VWO || [];
    
    window.VWO.push(['track.revenueConversion', _vis_opt_revenue]);
    
    </script>

    If your account is enabled with Data360, you need to insert the following line immediately below the <script> tag in your custom code.

    var_vis_opt_revenue = "REPLACE_THIS_WITH_ACTUAL_REVENUE";

    Also, replace the value of the revenue property with _vis_opt_revenue.

    Finally, your code should be in the following format:

    <script>
    var_vis_opt_revenue = "REPLACE_THIS_WITH_ACTUAL_REVENUE";
    // Do not change anything in the following two lines
    window.VWO = window.VWO || [];
    VWO.event = VWO.event || function () {VWO.push(["event", ...arguments])};
    // Replace the property values with your actual values
    VWO.event(<“eventName”>, {
    <“propertyName”>: <“PropertyValue”>,
    <“revenueProperty”>: _vis_opt_revenue,
    });
    </script>

11. You can customize the revenue variable to hold a value other than the order total. For eg: If you want the order total less shipping cost and tax, you can modify the code as follows:

    var _vis_opt_revenue = window.Order[2]– window.Order[4]– window.Order[5];

You can customize the revenue goal by adding other details as follows:

• Order[0] = Order ID

• Order[2] = Payment Amount

• Order[3] = Affiliate Commissionable Value

• Order[4] = Sales Tax

• Order[5] = Total Shipping Cost

Click here to know more about customizing the revenue tracking code on Volusion. 

And that’s it. Your Volusion web store is now integrated with VWO. You can now go ahead and create a test on your website.