BigCommerce on a computer

Ask Professor Tux: Passing in custom user data in BigCommerce (Stencil & Blueprint themes)

Professor TuxingtonYou have unique customers coming to your BigCommerce website. Professor Tuxington will lead you through the steps to pass in custom user data for your BigCommerce Stencil and Blueprint themes.

Definition

Lucky Orange provides you with basic information for each of your visitors, such as the visitor’s geographic location, device type and what webpages were visited, but what if you want to collect more data?

Your solution: Custom User Data

Here’s why: Custom User Data lets you pass in the information you want to know once you have a relationship with a user.  Once set up, Custom User Data will appear and can be accessed in many of Lucky Orange’s insights, such as Live Visitors, Recordings and Dynamic Heatmaps. After passing through customer user data, you can see when Sally Smith visited your site so you can connect session recordings, heatmaps and more directly to Sally.

Examples
  • Email Address
  • Customer ID
  • Account information

How to set up custom user data in BigCommerce: Stencil Theme

  1. Go to “Storefront” > “Footer Scripts” in your BigCommerce dashboard.
  2. Paste the script below into the text area labeled Footer and click Save.
<script>
  var customData = {
    name: '{{customer.name}}',
    email: '{{customer.email}}'
  };
  window._loq = window._loq || [];
  window._loq.push(['custom', customData]);
</script>

  1. The default script will pass in a customer’s name and email as custom data.  If you wish to change this, you can refer to the BigCommerce Stencil Object Model Reference for other values that can be sent to Lucky Orange.

How to set up custom user data in BigCommerce: Blueprint Theme

  1. Go to “Storefront” > “My Themes” in your BigCommerce dashboard.
  2. Under the “Current Theme” section click “Edit HTML/CSS.” This will open a new browser window.
  3. On the left side of the page you will see a section titled “Files used by this template:.” From that list select the file titled “Footer.html.”
  4. Immediately before the last “</div>” in the file create a new line. On that line add the following code snippet:
<script>
  window._loq = window._loq || [];
  var customData = {
    name: '%%GLOBAL_CurrentCustomerFirstName%% %%GLOBAL_CurrentCustomerLastName%%',
    email: '%%GLOBAL_AccountCurrentEmail%%'
  };
  window._loq.push(['custom', customData]);
</script>
  1. By default, this snippet will send a signed-in customer’s name and email address as custom data. If you wish to send other information about the customer, you may use the variables that BigCommerce provides for their Blueprint themes from this list.

Related Links

Leave a Reply

Your email address will not be published. Required fields are marked *