BigCommerce | Friendbuy Help Center

For BigCommerce, your Friendbuy SmartPixel code will be separated into three snippets and placed in three different BigCommerce files as shown below. You can find it in your Friendbuy account by navigating to Settings > Integration Code.

Install SmartPixel (Three Code Snippets)

To complete this process, you must have access to your website source code, be relatively comfortable with HTML (or have a developer that can help you).

Navigate to Design > Theme Files

Navigate to Files used by this template > HTMLHead.html

Copy the first two lines of the SmartPixel after the opening <script> tag of the SmartPixel code and paste those two lines right before the closing </head> tag in the HTMLHead.html file. Make sure to wrap those two lines with <script></script> tags.

SAMPLE CODE 1

We can save you some time by copying and pasting the sample code below, but don't forget to make the SmartPixel your own by changing the element with the series of xxxxxxxxx's to match your Friendbuy account snippets.


    window['friendbuy'] = window['friendbuy'] || [];
    window['friendbuy'].push(['site', 'site-xxxxxxxxxxxxxxx']);

Next, navigate to Other Template Files > Panels > TopMenu.html

Copy and paste the next snippet containing Customer ID and Customer Email at the top - no changes to the code are necessary here so you can copy and paste the code below. Make sure those two lines with <script></script> tags.

SAMPLE CODE 2


    window['friendbuy'].push(['track', 'customer',
        {
            id: "%%GLOBAL_CurrentCustomerEmail%%",
            email: "%%GLOBAL_CurrentCustomerEmail%%"
        }
    ]);

NOTE: BigCommerce doesn’t pass Customer ID, so we recommend passing customer's email address as a substitute, which is why you see it twice in the snippet above. Yes, pass email into both ID and Email.

Next, navigate to Other Template Files > Panels > Footer.htm

Copy and paste the last 3 lines of the Smart Pixel code and place them at the top of the page. Make sure to wrap those two lines with <script></script> tags. Here's what the code looks like. Do NOT copy and paste this directly, as your code might be different.

SAMPLE CODE 3


    (function (f, r, n, d, b, y) {
        b = f.createElement(r), y = f.getElementsByTagName(r)[0];b.async = 1;b.src = n;y.parentNode.insertBefore(b, y);
    })(document, 'script', '//djnf6e5yyirys.cloudfront.net/js/friendbuy.min.js');

Install Conversion Tracking

Navigate to Setup & Tools > Conversions

Viewing the General Settings tab, copy and paste the Friendbuy Conversion Tracker snippet in Conversion Tracking Code box.

Configure JavaScript for the Order ID (%%ORDER_ID%%) and Amount (%%ORDER_AMOUNT%%). You can copy and paste the snippet below, without modification, to save time.

SAMPLE CODE - CONVERSION TRACKER


    window['friendbuy'] = window['friendbuy'] || [];
    window['friendbuy'].push(['track', 'order',
        {
            id: %%ORDER_ID%%,
            amount: %%ORDER_AMOUNT%%
        }
        ]);
    window['friendbuy'].push(['track', 'products',
        [
            {
                //sku: REPLACE WITH YOUR PRODUCT SKU,
                //price: PUT YOUR PRODUCT PRICE,
                //quantity: REPLACE WITH HOW MANY WERE BOUGHT, IF APPLICABLE
            },
            // You can add more product blocks like the one above here.
        ]
    ]);

NOTE: BigCommerce does not pass SKU, Quantity and Price, however you can install the Conversion Tracking snippet ‘as is’ and leave those parameters commented out.

Install Widgets

We highly recommend that you install at least four widgets in key locations:

Stand-alone referral page
Homepage
User account pages
Post purchase page

By placing referral widgets in those four areas of your site, you will increase user participation. You can read more about best practices here.

Below you will find two widget installation examples for the post purchase and stand-alone referral page widgets. After installing these two, you'll be primed to install the homepage and user account pages.

Install a Post Purchase Page Widget

We also highly recommend that you configure your post purchase widget to auto pop. You can set this within your Friendbuy account. Navigate to your widget and clicks on Settings > Widget Display Settings. Configure the settings such that the Style is Overlay, Call To Action is Button, and Autopop is Immediately.

Navigate to Design > Theme Files

Navigate to > Other Template Files > order.html

Copy an paste your widget snippet.

SAMPLE POST PURCHASE PAGE WIDGET CODE:

Don't forget to make the SmartPixel your own by changing the element with the series of xxxxxxxxx's to match your Friendbuy SmartPixel.


    window['friendbuy'] = window['friendbuy'] || [];
    window['friendbuy'].push(['widget', "xxxxxxx"]);

Install a Stand-Alone Referral Page Widget

Navigate to Web Content > Web Pages

Create a page that will be your stand-alone referral page. Edit your Page Name and Page URL, then select the HTML view, of your Web Page Details.

Then paste your widget snippet in modal that pops up, the HTML Source Editor.

Click Update to save.

SAMPLE REFERRAL PAGE CODE:

Don't forget to make the SmartPixel your own by changing the element with the series of xxxxxxxxx's to match your Friendbuy widget code.


    window['friendbuy'] = window['friendbuy'] || [];
    window['friendbuy'].push(['widget', "xxxxxxx"]);

As stated previously, we recommend installing referral widgets on the homepage and user account pages as well.