Appearance

Vue Application ​

These instructions are designed for users that have a single-page app powered by Vue.js javascript framework.

Base Script ​

For our tag to run successfully and collect everything it needs, we can start by injecting the base script for the tag on your site.

  1. Place the below base script in the <head> of your index.html page.
    javascript
    <script
  type="text/javascript"
  src="https://cdn.datasteam.io/js/datasteampx.js"
  defer
  async
></script>

Page Load Tag ​

This tag keeps track of general site visitor traffic, and will trigger after each route is loaded.

  1. Using your router, place in the below snippet
  2. Update access key placeholder (Your_Access_Key), leaving single quotes intact.
    Ex.) AccessKey: ‘000000000000’
    javascript
    router.afterEach((to, from) => {
  const MGX = typeof Window.MGX === "undefined" ? [] : Window.MGX;
  if (to.name != "order-confirmation" && to.name != "route-to-suppress") {
    MGX.push({
      AccessKey: "Your_Access_Key",
    });
  }
});

    NOTE: This MUST NOT be triggered on any screen that is the checkout confirmation page or a page that is supposed to be suppressed. This is the only exception.

Conversion Tag ​

This tag records when a user completes a conversion on the site. This can come in the form of a purchase, form submitted, etc. A conversion page is the final confirmation/ checkout complete/ thank you page that displays after a user has completed a conversion action on the site.

  1. Using your router, place in the below snippet
  2. Update access key placeholder (Your_Access_Key), leaving single quotes intact.
    Ex.) AccessKey: ‘000000000000’
  3. Update the OrderId and OrderTotal placeholders (SomeId/ ###.##) with the values that correspond to the ecommerce platform being used, leaving single quotes intact.
    • If order values are not needed, please input null with NO quotes
      • OrderId: null,
      • OrderTotal: null
      javascript
      router.afterEach((to, from) => {
    const MGX = typeof Window.MGX === "undefined" ? [] : Window.MGX;
    if (to.name === "order-confirmation") {
        MGX.push({
            AccessKey: "Your_Access_Key", //Must be set in MGX object or passed with commit
            Label: "Conversion",
            Info: "Order", //Optional piece of meta data to enable classification of different conversion types/events.
            OrderId: "SomeId",
            OrderTotal: "###.##",
        });
    } else if (to.name !== "route-to-suppress") {
        MGX.push({
            AccessKey: "Your_Access_Key",
        });
    }
});

© NaviStone 2025