Understanding Single Page Application (SPA) Tag Implementation

This article explains why Mention Me tags may not reappear on dynamic Single Page Applications (SPAs), and guides you through safely resetting and validating tags to ensure a smooth referral experience for your customers.

Why Mention Me tags may not reappear on SPAs

Single Page Applications (SPAs) update their content without a full page reload. Mention Me tags are designed to prevent being shown more than once per load. On SPAs built with frameworks like React, AngularJS, or VueJS, this behaviour can sometimes stop the tag from reappearing when you expect it.

How to identify this issue

If you're affected by this issue, you might see a message in your browser’s developer console, such as:

A tag has already fired with the identifier [linkcheckout] on this page. Suppressing tag

How to reset a tag so it can re-fire

To allow a Mention Me tag to re-fire, you need to clear its ‘fired’ state from the browser’s memory. Use the JavaScript snippet below:

1. Place this snippet above your Mention Me tag script within your SPA’s code base or navigation handler.
2. Change the situation and implementation values to match your tag setup (for example, link and checkout for a referral tag on your checkout page).

<script type="text/javascript">
    /* This will ensure the link (implementation) and checkout (situation) get
       cleared before loading the Mention Me tag shown on refresh or page change.
    */
    if (window.MentionMeFiredTags != undefined && window.MentionMeFiredTags != '') {
        var situation = 'checkout';
        var implementation = 'link';

        if (window.MentionMeFiredTags[implementation + situation] == true) {
            delete window.MentionMeFiredTags[implementation + situation];
        }
    }
</script>
<script src="your-existing-referee-tag-goes-here"></script>

You can use this approach with any Mention Me tag. Be sure the situation and implementation values match the tag you want to reset.

How to validate and inspect tags

It’s important to check that your tags are firing correctly. You can do this using Chrome DevTools:

• Right-click on the web page
• Select Inspect
• Open the Console tab
• Paste the following command and press Enter:

window.MentionMe.validateTags()

This will describe whether your tags are valid and active.

To check which tags have already fired, paste this into the console:

window.MentionMeFiredTags

You’ll see variable names such as linkcheckout to indicate tags that have already fired.

For example, if you see a variable called embeddashboard, embed is the implementation, and dashboard is the situation.

Summary

Whether you are running tags on your product page, checkout, or customer dashboard, following these steps ensures your Mention Me tags trigger correctly on dynamic websites. Use the validation tips above to debug and test as you set up or troubleshoot your referral journeys.