Understanding Single Page Application (SPA) Tag Implementation

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 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.