Understanding Single Page Application (SPA) Tag Implementation

If you’re using a dynamic or Single Page Application (SPA) framework such as React, AngularJS, or VueJS, you may encounter issues with Mention Me tags not displaying consistently across page views. This is because our tags are designed to prevent duplicate triggers, which can inadvertently suppress tag executions on SPAs where content updates without full page reloads.

In this article, you’ll learn why this happens and how to configure your Mention Me tags to re-fire safely in SPA environments. We’ll walk you through a simple JavaScript snippet that resets previously fired tag states—allowing tags to be triggered again when needed. You’ll also find instructions on how to inspect and validate tags using browser developer tools, making debugging and testing easier.

Whether you’re running tags on a product page, checkout, or customer dashboard, this guide provides everything you need to ensure a seamless and reliable referral journey across dynamic websites.

Q: I have a dynamic/Single Page Application/SPA website - how do I get the tag journey to appear multiple times?

A: The tags have a feature to prevent them being shown multiple times. In websites built with React, AngularJS, VueJS or other dynamic frameworks, this can conflict and prevent the tag from appearing when you would expect it to.

If this error occurs, you will see a message in the browser developer console similar to:

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

To prevent this from happening, we must ensure that the Mention Me tag is aware it can re-run without any harm. The code below will tell the Mention Me tags that they can fire again.

To do this we concatenate the implementation (in this case link) and situation (in this case checkout) and tell the Mention Me tag that you can re-fire the tags for the linkcheckout.

The following code will do this:

<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" />

Please note that the above approach can be applied to any of the Mention Me tags if needed.

You would need to ensure that the situation and the implementation parameters match the ones for the corresponding tags.

You can do this by navigating to Chrome DevTools by:

• Right click on the page
• Select Inspect option
• Navigate to Console tab
• Paste the following:

window.MentionMe.validateTags()

This will provide output describing the validity of the tags. 

You can also see which tags have already fired by pasting:

window.MentionMeFiredTags

Here you should be able to see the aforementioned variables like linkcheckout.

For example: If you see embeddashboard value this means the implementation parameter is embed and the situation parameter is dashboard.