If you'd like to integrate Mention Me with Google Tag Manager, you can follow the below steps:
Your Datalayer
Check the information in your data layer
Include first name, surname, email address, order total, order currency and, if running referral in multiple languages, locale.
Also enter the name of each variable added for the JavaScript code. These must match to your JavaScript otherwise they won't work. Do the same process for first name, surname, email, locale, order total and order currency.
For more information about the data layer, please check this guide: https://developers.google.com/tag-manager/devguide
Data Variables
Add data variables to Google Tag Manager
Add a new variable for each parameter (name, surname, email, order_number, order_subtotal, order_currency, locale, coupon_code )
On your GTM account, navigate to the sidebar and click on Variables. Then:
- Click NEW under User-Defined Variables
- Click Choose a variable type to begin set-up...
- Choose Data Layer Variable, then add a name to the variable
- Save
Tag Implementation
Set up the tags
The basic integration consists of 3 tags: referrer, referee and landing page.
On your GTM account, navigate to the sidebar and click Tags. Then for each tag:
- Click NEW
- Click Choose a tag type to begin set-up...
- Choose Custom HTML, then add a name to the tag
- Add the tag and the triggering
- Save
Here's a recap of the tags and relative triggers (ask your Onboarding Project Manager for any additional scripts/promotion points - also ask for your Partner Code).
Referrer tag
Replace each variable in the curly brackets with the correct variable name you have on your end (that you added on Step 2). Assuming you've given the variables the names firstname, surname, email etc, it will look like this:
<script type="text/javascript" src="https://tag-demo.mention-me.com/api/v2/referreroffer/yourPartnerCodeGoesHere?situation=postpurchase&email={{email}}&surname={{surname}}&firstname={{firstname}}&locale={{locale}}&order_currency=
{{order_currency}}&order_subtotal={{total}}&order_number={{order_number}}&coupon_code={{coupon_code}}"></script>
Trigger
Once added the tag, scroll down to the Triggering section and click on Choose a trigger to make this tag fire..., then:
- Click on the
+at the top-right corner to add a new trigger - Click on Choose a trigger type to begin set-up...
- Choose the appropriate trigger type - usually our clients use a Custom Event trigger (when the purchase is complete), or a Page View - DOM Ready trigger (e.g. when the Page URL contains "confirmation")
Referee tag
<script type="text/javascript" src="https://tag-demo.mention-me.com/api/v2/refereefind/yourPartnerCodeGoesHere?situation=checkout&locale={{locale}}"></script>Trigger
Once added the tag, scroll down to the Triggering section and click on Choose a trigger to make this tag fire..., then:
- Click on the
+at the top-right corner to add a new trigger - Click on Choose a trigger type to begin set-up...
- Choose the appropriate trigger type - usually our clients use a Custom Event trigger (like "Proceed to checkout"), or a Page View - DOM Ready trigger (e.g. when the Page URL contains "checkout"), or a History Change trigger (for Single Page Applications):
You will also need to add this div directly to your website, at the cart/checkout page, next to the coupon code box:
<!-- Begin Mention Me referee placeholder div --> <div id="mmWrapper"></div> <!-- End Mention Me referee placeholder div -->
Landing page tag
<script type="text/javascript" src="https://tag-demo.mention-me.com/api/v2/referreroffer/yourPartnerCodeGoesHere?situation=landingpage&locale={{locale}}"></script>Trigger
Once added the tag, scroll down to the Triggering section and click on Choose a trigger to make this tag fire..., then:
- Click on the
+at the top-right corner to add a new trigger - Click on Choose a trigger type to begin set-up...
- Choose the appropriate trigger type - usually our clients use a Page View - DOM Ready trigger (e.g. when the Page URL contains "Refer-a-friend")
You will also need to create the landing page - a page on your website with header and footer, and an empty body. Then add this div into the body:
<!-- Begin Mention Me referrer placeholder div --> <div id="mmWrapper"></div> <!-- End Mention Me referrer placeholder div -->
Dashboard (within account page) tag
Replace each variable in the curly brackets with the right variable name (that you added on Step 2). Assuming you've given the variables the names firstname, surname, email etc, it will look like this:
<!-- Begin Mention Me dashboard integration -->
<script type="text/javascript">
// Always clear the link/checkout situation before loading. This will ensure the
// Mention Me tag will be shown on refresh or page change.
if (window.MentionMeFiredTags != undefined && window.MentionMeFiredTags != '') {
var situation = 'dashboard';
var implementation = 'embed';
if (window.MentionMeFiredTags[implementation + situation] == true) {
delete window.MentionMeFiredTags[implementation + situation];
}
}
</script>
<script src="https://tag-demo.mention-me.com/api/v2/dashboard/yourPartnerCodeGoesHere?email={{email}}&surname={{surname}}
&firstname={{firstname}}&locale={{locale}}&situation=dashboard&implementation=embed"/>
<!-- End Mention Me dashboard integration -->
Trigger
Once you have added the tag, scroll down to the Triggering section and click on Choose a trigger to make this tag fire..., then:
- Click on the
+at the top-right corner to add a new trigger - Click on Choose a trigger type to begin set-up...
- Choose the appropriate trigger type - usually our clients use a Page View - DOM Ready trigger (e.g. when the Page URL contains "dashboard")
You will also need to create the dashboard page - a page on your website within your Customer Account section with header and footer, and an empty body. The URL for the page should contain the word 'dashboard' to ensure the trigger works. Then add this div into the body:
<!-- Begin Mention Me dashboard placeholder div -->
<div id="mmWrapper"></div>
<!-- End Mention Me dashboard placeholder div -->
Testing
Test values using preview mode
Use preview mode to place an order on your live site and check you have set up the variables correctly. You can also give us access to the GTM Preview so we can test the tags.
Publish
Publish the tags
Once the demo tags have been tested, you can remove the -demo from the tags' URL and push them live.
- Click Submit
- Choose public
- Create a version
- Add name and description
- Publish
For more information about publishing tags on GTM, please visit this page:
