How to add Mention Me tags into BOLD checkouts on Shopify

Note: The following instructions explain the integration of the Mention Me tags with BOLD Subscriptions V1. If you use a different version and find any issues with our suggested integration approach, please reach out to our support team.

Step 1: Go to the BOLD Integrations Settings

- Go to 'Apps' and open your BOLD application

- Select 'View all integrations'.

Step 2: Add the Referrer code snippet 

To collect information about customers who place subscription orders and serve them referral offers, take the below actions: 

- Open the 'Advanced Tracking Scripts' section.

- Once you're inside this section, you will see a list of all available variables on your BOLD checkout. 

Here you should confirm that you can pass the following data:

- customer email, firstname, surname, order ID, order subtotal (excl. taxes/shipping), order currency, locale (e.g. following the format en_GB, en_US, fr_FR, etc) and situation (can be hardcoded as 'postsubscription')

Scroll down and add the script below:

<!-- Begin Mention Me referrer integration -->
<script>
var mmEmailEncoded = encodeURIComponent('[customer_email]');
var mmOrderNumberEncoded = encodeURIComponent('[order_name]');
var mmFirstNameEncoded = encodeURIComponent('[first_name]');
var mmLastNameEncoded = encodeURIComponent('[last_name]');
var mmUrl = "https://tag.mention-me.com/api/v2/referreroffer/YOUR-PARTNER-CODE?email="+mmEmailEncoded +"&order_number="+mmOrderNumberEncoded+"&order_subtotal=[subtotal]&order_currency=GBP&situation=postsubscription&locale=en_GB&firstname="+mmFirstNameEncoded+"&surname="+mmLastNameEncoded;  // build mm tag url
var mmScript = document.createElement("script");  // create a script DOM node
mmScript.src = mmUrl ; //set the script src
var mmParentNode = document.getElementsByTagName('body')[0];
// Insert the new node before the reference node
mmParentNode.insertBefore(mmScript, mmParentNode.firstChild);
</script>
<!-- End Mention Me referrer integration -->

• Replace YOUR-PARTNER-CODE with your partner code provided by Mention Me.
  
  
• For Order_Currency and Locale, use the Shopify variables based on Shopify setup. If you can’t use these due to a different Shopify theme or setup, manually enter the variables instead (e.g. order_currency=GBP&locale=en_GB).
  • The locale should always have the following format:  ISO 639-1 language code, an underscore (_), then the ISO 3166-1 alpha-2 country code (e.g. en_GB for English/UK). 
    
    
• All customer data values must be URL encoded (examples include @ becoming %40, ' ' becoming %20 or ' becoming %27). Find out more.
  
  
• If your website uses both Shopify and BOLD checkouts, integrate the referrer tag separately on each. Add different situation parameters (e.g. ‘postpurchase’ and ‘postsubscription’) to make it easier to track performance.
  
  
• Important: Use the url tag-demo.mention-me.com to test and preview the tag. Make sure you switch to the url tag.mention-me.com when you save your changes, so real customers don't see any 'demo' content. 
  
  The 'live url' (tag.mention-me.com) is disabled by default so it will not show any content until it is activated by Mention Me (upon inspection you will see a 403 error saying the tags haven't been approved). 
  
  

IMPORTANT:   Some BOLD versions such as Bold Cashier don't allow you to pass the customer 'firstname' and 'surname' via this script - see this page for more information.

If you have this limitation, you need to use an alternative version of this snippet excluding these customer details, in which case the customer will be prompt an additional screen to enter their own details. This will still allow you to track orders/referrals but customers will not be automatically enrolled on the referral offer. Below are step by step instructions for Bold Cashier:

While in the Bold Cashier app, navigate to Settings > Analytics. 

When in the Analytics setting, scroll down to Custom Script and enable to toggle beside Enable custom script.

After this has been enabled, enter in your custom script(s) (see bellow example) and then select Save. 

var mmEmailEncoded = encodeURIComponent(BOLD.order.customer.email);
var mmOrderNumberEncoded = encodeURIComponent(BOLD.order.id);
var mmUrl = "https://tag.mention-me.com/api/v2/referreroffer/YOUR-PARTNER-CODE?email=${mmEmailEncoded}&order_number=${mmOrderNumberEncoded}&order_subtotal=${BOLD.order.subtotal/100}&order_currency=${BOLD.order.currency}&situation=postsubscription&locale=en_US" // build mm tag url
var mmScript = document.createElement("script"); // create a script DOM node
mmScript.src = mmUrl ; //set the script src
var mmParentNode = document.getElementsByTagName('body')[0];
// Insert the new node before the reference node
mmParentNode.insertBefore(mmScript, mmParentNode.firstChild);

Step 3: Add your referee tag to the checkout flow

The Referee tag will show a link (Been referred by a friend?) on the checkout journey so that someone who has been referred by name can tell us who referred them so they can receive their reward. 

You can add the referee tag anywhere in your customer journey as long as it’s triggered before the referrer tag (post-order/signup). We recommend that you place it under your Cart and Checkout pages (ideally to the coupon promo box). 

• This page explains how to add your referee tag under the Shopify Cart/ Checkout.
• Depending on your website configuration, you can also consider adding the following script to the bold-cart.liquid page (under Online Store > Themes > Theme options > Edit Code)  or other sections required to display the link under the bold checkout page:

<div id="mmWrapper"></div>

<script type="text/javascript" src="https://tag.mention-me.com/api/v2/
refereefind/YOUR-PARTNER-CODE?implementation=link&situation=checkoutsubscription"></script>

• The <div> wrapper will act as a container where the "Been referred by a friend" link will be displayed, it should be placed under the coupon promo-box or above the checkout button. 
  
  
• Replace YOUR-PARTNER-CODE with your partner code provided by Mention Me.
  
  
• For the locale variable, use the Shopify variables based on Shopify setup. If you can’t use these, manually enter them instead following the format ISO 639-1 language code, an underscore (_), then the ISO 3166-1 alpha-2 country code (e.g. en_GB for English/UK). 
  
  
• If your website uses both Shopify and BOLD checkouts, integrate the referee tag separately on each. Use different situation parameters (e.g. ‘checkout’ and ‘checkoutsubscription’) to make it easier to monitor performance. 
  
  
• Important: Use the url tag-demo.mention-me.com to test and preview the tag. Make sure you switch to the url tag.mention-me.com when you save your changes, so real customers don't see any 'demo' content. 
  
  
• The 'live url' (tag.mention-me.com) is disabled by default so it will not show any content until it is activated by Mention Me (upon inspection you will see a 403 error saying the tags haven't been approved). 

  
  Have a question on the above? Please contact our support team.