With Google Tag Manager you can make quick work of creating custom URLs in Mouseflow.

1. Set up a "New Tag" in GTM and then choose "Custom HTML":

2. Add the following snippet of JavaScript to the tag like this:
Note: Change the part that shows "/this-is-the-url-shown-in-mouseflow" to your desired virtual URL.

<script type="text/javascript">
window._mfq = window._mfq || [];
window._mfq.push(["newPageView", "/this-is-the-url-shown-in-mouseflow"]);

3. Add a Trigger:

You can trigger the virtual URL on anything you want, but if for example, you want the virtual URL to be set whenever a visitor clicks a specific button, you can do that by clicking inside the triggering card and then clicking the + sign, in the upper right-hand corner:

Click inside the new trigger card that appears and then choose Click > All Elements:

Note: If you don't have the option to choose "Click" then you can add the "click" selector by going to Variables -> Configure -> and then enable "Click Element" in the list.

Once you've chosen the trigger type you can set it up like this to make it trigger on a specific element on your site. In this example, you define the element you want the tag to trigger on by its CSS selector:

Finding the CSS Selector:
Finding the selector of an element in Chrome only takes a couple of clicks using the built-in Developer Tools.

To find the CSS selector of a page element:
A. Right-click the element on the page and choose "Inspect" - The Developer Tools window will open.
B. In the Elements tab of Developer Tools, right-click the highlighted element and select Copy > Copy selector.

That's it! The selector string is now in your clipboard and you can paste it into your trigger.

4. After configuring the trigger as shown above please save the trigger and the tag - and then click the submit button in the top right-hand corner.

Our Custom Tag Editor can be used to create virtual URLs with no coding!

Did this answer your question?