How to add Mention Me tags into ReCharge checkouts on Shopify

Step 1: Go to the ReCharge checkout settings

• Log in to your Shopify Admin Panel at YourCompanyName.myshopify.com/Admin
• Click Apps in the menu, then ReCharge Recurring Billing & Subscriptions
• Click the wrench icon
• Click Checkout

Step 2: Add your referrer tag to the checkout page

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

Scroll down to the Thank You section of the ReCharge Checkout Settings page:

Follow your setup instructions to insert the Mention Me referrer tag and replace all mandatory Mention Me variables with ReCharge variables from this list.

Your tag should look similar to this: 

<!-- Begin Mention Me referrer integration -->
<script type="text/javascript" src="https://tag.mention-me.com/api/v2/referreroffer/PARTNERCODE?firstname={{first_name|urlencode}}&surname={{last_name|urlencode}}&email={{email|urlencode}}&order_number={{order_number|urlencode}}&order_subtotal={{subtotal_price}}&situation=postsubscription&order_currency=ORDER_CURRENCY&locale=LOCALE"></script>
<!-- End Mention Me referrer integration -->

Next follow these steps to change the tag to work for you.

• Replace YOUR-PARTNER-CODE-HERE with your partner code provided by Mention Me.
  
  
• For order_currency and locale variables you'll need to populate them based on your Shopify setup.
  
  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). Need more help? Find out more about URL encoding here.
  
  
• If your website uses both Shopify and ReCharge 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). 

Once completed, your referrer tag is ready to go!

Step 3: Add your referee snippet code to the checkout or signup flow

You can add the referee tag anywhere in your customer journey as long as it’s triggered before the referrer tag (post-order/signup).

The referee tag lets prospective new customers search for their friend’s name and claim an introductory reward.  

Find out how to add the referee tag on the ReCharge Checkout page.  

• Under the CSS Editor, scroll to the Enable Javascript on Page 1 of Checkout section. If you can’t see this, please contact ReCharge to request they enable Javascript on your checkout.

• You'll need to insert the following snippet of code into page 1 of the checkout section. 

document.addEventListener("DOMContentLoaded", function () {
    // Load the Mention Me checkout div, and add the Mention Me Referee tag.

    var mmDiv = document.createElement("div");
    mmDiv.id = "mmWrapperRecharge";

    document.getElementById("discount").appendChild(mmDiv);

    var mmRefereeTag = document.createElement("script");
    mmRefereeTag.src = "https://tag.mention-me.com/api/v2/refereefind/YOUR-PARTNER-CODE-HERE?situation=subscriptioncheckout&locale=USER-LOCALE-HERE";

    document.head.appendChild(mmRefereeTag);
});

Then follow these steps to update the code for your site:

• Replace YOUR-PARTNER-CODE-HERE with your PartnerCode provided by Mention Me.
  
  
• For the locale variable you'll need to populate it based on your Shopify setup. Use the same method as you have done for the Referrer tag above.
  
  
• If your website uses both Shopify and ReCharge checkouts, integrate the referee tag separately on each. Add 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). 

Once completed, your referee tag is ready to go!