Artificial Pageviews

Artificial pageviews (APVs) track a step that the visitor sees as a distinct view but that doesn't change the URL, such as opening a modal, popin, or overlay.

Use artificial pageviews for:

• Modal windows (also called popups or popins), such as a cart preview or a newsletter sign-up
• Overlays, drawers, or tabs that change the content displayed without changing the URL
• Key interactions you want to analyze as a separate step, such as adding an item to the cart

Modal tracking with artificial pageviews

To track a modal opening and closing while the user navigates your site, use artificial pageviews.

Send one artificial pageview when the modal is opened, and another one when the modal is closed. For example, this might be a click on the close button or a custom JavaScript event that fires when the modal is dismissed. For the close event, you can reuse the code snippet, updating the name or path parameter to indicate that this is a close event.

Modal windows and events that don't change the URL

To track modal windows or events that don't change the URL, use the Contentsquare Trackpageview functionality by following these methods and binding them to the correct action (button click or event trigger).

Use the Contentsquare Tag Configurator ↗ to implement artificial pageviews through a visual interface.

1. Open your container and go to the templates section

2. Select Search gallery

3. Type in contentsquare and select the Contentsquare - Artificial Pageview option

4. Click Add to workspace

5. Confirm your choice by selecting Add

6. Go to the Tags section and click the New button to create a new tag

7. Configure it by selecting the top-right button

8. Type in contentsquare and select the Contentsquare - Artificial Pageview option

9. Select the tag and configure:

   • Select the Free text option and enter the value under Artificial Pageview value.
   • If there's a modal (sometimes called "popup") on your website and you need to deploy APV, then select This is for the opening a popup or This is for the closing of a popup in the drop-down.

   

1. Select "Choose a tag type to begin setup...".

2. In the list, pick the "Custom HTML" tag.

3. Write the snippet to be fired in the HTML field. It should be similar to this:

   <script type="text/javascript">
     window._uxa = window._uxa || [];
     window._uxa.push([
       "setQuery",
       window.location.search + (window.location.search ? "&" : "?") + "cs-popin-dedicated_query_string", { lifespan: 'onNextPageviewOnly' }
     ]);
     window._uxa.push([
       "trackPageview",
       window.location.pathname + window.location.hash.replace("#", "?__"), { lifespan: 'onNextPageviewOnly' }
     ]);
   </script>

   

4. Select "Choose a trigger to make this tag fire...".

5. Create a new trigger to make this tag fire

6. Select "Choose a trigger type to begin setup...".

7. In the list, pick the "All Elements" trigger.

8. Check "Some Clicks"

9. Select "Click Element", "matches CSS selector" and enter a valid CSS filter corresponding to the element you want to track.

   For example the valid CSS for:

   <button class="btn btn primary">Submit</button>

   Will be:

   .btn.btn.primary

   

Assign the event you might already have in place a custom HTML snippet and write the snippet to be fired in the HTML field. It should be similar to this:

<script type="text/javascript">
  window._uxa = window._uxa || [];
  window._uxa.push([
    "setQuery",
    window.location.search + (window.location.search ? "&" : "?") + "cs-popin-dedicated_query_string", { lifespan: 'onNextPageviewOnly' }
  ]);
  window._uxa.push([
    "trackPageview",
    window.location.pathname + window.location.hash.replace("#", "?__"), { lifespan: 'onNextPageviewOnly' }
  ]);
</script>

When setting up the rule, make sure to target the specific event or condition needed. For instance, for an add to bag action, you could either follow the click route:

Or the custom event route:

Once you've chosen the desired event, you can select the Artificial Pageview tracking action from the Contentsquare extension.

Depending on the pageview you'd need to track, you can either specify the query to be passed to the Contentsquare servers:

Or, leave the input field empty, which will allow our script to capture the current URL automatically:

1. To add a new event, go to the "EDIT" step, and click "ADD EVENT" (1):

   A configuration window will appear, with several fields:

   • (1) "Name": Name of the event you wish to add
   • (2) "Id": The event's ID (to be completed only if you know it and want to trigger the event based on its ID; otherwise, leave the field empty, and it will be generated automatically by Commanders Act)
   • (3) JavaScript code: Area where the event's JavaScript code is entered
   • (4) "Use Tag Cleaner": Feature allowing you to "correct" the event (rewrites it to avoid JavaScript errors and makes it compatible with the container's code)

   

2. Click "ADD" to add your event to the container.

3. Go to the tag library. Once there:

   1. Write "Event Injection" in the search engine
   2. Select the tag
   3. Add the tag

In case of tracking pageviews with Contentsquare, the code to be deployed should follow this guideline:

window._uxa = window._uxa || [];
window._uxa.push(['trackPageview', <PATH_TO_SEND> ]);

(4) Go to your website; place the cursor on the element you wish to place an event on and do a right click. In the menu that opens up, select "Inspect Element". (5) In the console, once the element is highlighted, right-click again. (6) Choose "copy" from the menu. (7) > "Copy Selector".

(8) If you know the element's ID (starting with a #): copy and paste it in the #CSS_PATH# field.

(9) If you do not know or cannot find the ID: copy and paste the element's information starting with "#" and replace " > " with a single space in the code line.

(10) Copy and paste the line in the interface's #CSS_Path# field.

Now enter the ID of the event you wish to summon in the corresponding field.

Proceed to the deployment step as you do with other tags.

1. Within the main menu, select Online Store > Themes, then click the Actions drop-down menu, and Edit Code.

   

2. Open the relevant Liquid file where you want to trigger an artificial pageview based on your own JavaScript logic. You can put this in the main theme.liquid file or in a specific Liquid file.

   Let's say you want to trigger this artificial pageview only when a certain action takes place like when an item is added to the cart. You would need to wrap this code inside your own condition, callback function, or event listener.

3. In the snippet below, replace <PATH_TO_SEND> with your unique path.

   <script type="text/javascript">
     window._uxa = window._uxa || [];
     window._uxa.push(['trackPageview', <PATH_TO_SEND> ]);
   </script>

   You either hard-code a static value for the path like Added_to_cart or use Shopify's Liquid Objects ↗/Liquid Tags ↗ to grab the dynamic data from it like below:

   <script type="text/javascript">
     // Contentsquare Send Artificial Pageviews
     document.getElementById("AddToCart").addEventListener('click', function() {
         window._uxa = window._uxa || [];
         window._uxa.push(["trackPageview", "Added_to_cart_" + {{ custom_tag.value}}])
     });
   </script>

4. Insert this code after the main tracking tag block.

   The end result of adding this code into the Liquid file:

   <!-- Contentsquare Tags Start -->
   <script type="text/javascript">
     // Contentsquare Main Tracking Tag
     (function () {
       window._uxa = window._uxa || [];
       if (typeof CS_CONF === "undefined") {
         window._uxa.push([
           "setPath",
           window.location.pathname + window.location.hash.replace("#", "?__"),
           { lifespan: "onNextPageviewOnly" }
         ]);
         var mt = document.createElement("script");
         mt.type = "text/javascript";
         mt.async = true;
         mt.src = "//t.contentsquare.net/uxa/769238b6e1309.js";
         document.getElementsByTagName("head")[0].appendChild(mt);
       } else {
         window._uxa.push([
           "trackPageview",
           window.location.pathname + window.location.hash.replace("#", "?__")
         ]);
       }
     });
   </script>
   
   <script type="text/javascript">
     // Contentsquare Send Artificial Pageviews
     document.getElementById("AddToCart").addEventListener('click', function() {
         window._uxa = window._uxa || [];
         window._uxa.push(["trackPageview", "Added_to_cart_" + {{ custom_tag.value}}])
     });
   </script>

5. To modify the entire path that is sent, use the setPath command:

   <script type="text/javascript">
     // Contentsquare Send Artificial Pageviews
     document.getElementById("AddToCart").addEventListener('click', function() {
         window._uxa = window._uxa || [];
         window._uxa.push(["setPath", "Added_to_cart_" + {{ custom_tag.value }}, { lifespan: "onNextPageviewOnly" }]);
         window._uxa.push(["trackPageview"]);
     });
   </script>

   For more information, see the setPath command.

6. To modify only the query string, use the setQuery command:

   <script type="text/javascript">
     // Contentsquare Send Artificial Pageviews
     document.getElementById("AddToCart").addEventListener('click', function() {
         window._uxa = window._uxa || [];
         window._uxa.push(["setQuery", "Added_to_cart_" + {{ custom_tag.value }}]);
         window._uxa.push(["trackPageview"]);
     });
   </script>

For more information, see the setQuery command.

To send a pageview, use the trackPageview command:

<script type="text/javascript">
  window._uxa = window._uxa || [];
  window._uxa.push(['trackPageview', <PATH_TO_SEND>]);
</script>

<PATH_TO_SEND> is limited to 255 characters.

For instance, in case you wanted to keep track of the modal window appearing when adding an item to the cart:

<script type="text/javascript">
  window._uxa = window._uxa || [];
  window._uxa.push([
    "setQuery",
    window.location.search + (window.location.search ? "&" : "?") + "cs-popin-dedicated_query_string", { lifespan: 'onNextPageviewOnly' }
  ]);
  window._uxa.push([
    "trackPageview",
    window.location.pathname + window.location.hash.replace("#", "?__"), { lifespan: 'onNextPageviewOnly' }
  ]);
</script>

To track a modal (or "popin") opening/closing during the user's navigation, use artificial pageviews.

1. A first artificial pageview needs to be sent when the modal is opened — the sent URL will be the current one, followed by a string of characters allowing you to identify the modal.

   <script type="text/javascript">
     window._uxa = window._uxa || [];
     window._uxa.push([
       "setQuery",
       window.location.search + (window.location.search ? "&" : "?") + "cs-popin-dedicated_query_string", { lifespan: 'onNextPageviewOnly' }
     ]);
     window._uxa.push([
       "trackPageview",
       window.location.pathname + window.location.hash.replace("#", "?__"), { lifespan: 'onNextPageviewOnly' }
     ]);
   </script>

2. A second artificial pageview needs to be sent when the modal is closed. The sent URL will be the current one.

   <script type="text/javascript">
     window._uxa = window._uxa || [];
     window._uxa.push([
       "trackPageview",
       window.location.pathname + window.location.hash.replace("#", "?__")
     ]);
   </script>