Artificial Pageviews

Artificial pageviews are to be used when:

• An action completely changes the content displayed on the page without refreshing it and changing its URL (Ajax requests);
• The site is built with a Single Page Application (SPA) and any related frameworks (React, Angular);
• The user gets redirected to another step of a funnel without refreshing the page;
• The site re-routes all the URL changes without refreshing the page;
• The site is built as a Progressive Web App (PWA);
• Important Modal/Popup windows are displayed.

Stable URLs - Modal windows and artificial pageviews tracking

For tracking modal windows or events that don’t change the URL structure, you’ll need to use the Contentsquare Trackpageview functionality by following these methods and binding them to the correct action (button click/event trigger).

Dynamic URLs - Single Page Applications and History Change

In the event of the URL structure being changed on each view change, we can keep track of this by firing the Main Tag again: the tag will automatically detect that it was previously put in place on the site and fire a new pageview instead.

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 pop-up on your website and you need to deploy APV, then select This is for the opening a popup. in the drop-down.

   

1. Amend the Main tag configuration by adding a new trigger to it.

2. Create a new trigger

3. Select “Choose a trigger type to begin setup…“.

4. In the list, select the “History Change” trigger.

5. Save your trigger.

6. Select the “Save” button on the top right.

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', location.search + (location.search ? '&' : '?') + 'cs-popin-dedicated_query_string']);
       window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);
       window._uxa.push(['setQuery', location.search]);
   </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

   

1. Amend the Main tag configuration by adding a new trigger to it.

2. Create a new trigger

3. Select “Choose a trigger type to begin setup…“.

4. In the list, select the “History Change” trigger.

5. Save your trigger.

6. Select the “Save” button on the top right.

Assign the event you might already have in place to the 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', location.search + (location.search ? '&' : '?') + 'cs-popin-dedicated_query_string']);
    window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);
    window._uxa.push(['setQuery', location.search]);
</script>

Create (or select an already existing) event that occurs on each history change or view re-routing. Assign this event to the Contentsquare extension.

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.

You can also use Data Elements

In the event of a SPA implementation, if the path/query automatically changes on each re-routing, utilise the built-in history change event to fire the CS tag on each of these occurrences.

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 in order 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 ” > “(space>space) 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('#','?__')]);
           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 }}]);
           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, read about 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 popup window appearing when adding an item to the cart:

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

<script>
(function () {
    window._uxa = window._uxa || [];
    try {
        if (typeof dataLayer !== 'undefined') {
            for (var i = 0; i < dataLayer.length; i++) {
               window._uxa.push(['setCustomVariable', 1, 'Sample Variable', dataLayer[i].sampleVariable, 3]);
            }
        }
    } catch(e){}
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR_TAG_ID}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

<script>
(function () {
    window._uxa = window._uxa || [];
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR_TAG_ID}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

To track a popin opening/closure during the user’s navigation, use artificial pageviews.

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

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

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

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

The Contentsquare Tracking tag sends only one pageview per full reload. In a Single Page Application (SPA), that would be only once per session.

To handle this, an artificial pageview on every page change is needed — use the “History Change” event which is available in most Tag Management Systems.

You can fire the following script on every page and on history change. It fires the main tag the first time and then sends an artificial pageview for each next call.

<script type="text/javascript">
  window._uxa = window._uxa || [];
  /* First call */
  if (typeof CS_CONF === 'undefined') {
    window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
    var mt = document.createElement("script"); mt.type = "text/javascript"; mt.async = true;
    mt.src = "//t.contentsquare.net/uxa/YOUR_TAG_ID.js";
    document.getElementsByTagName("head")[0].appendChild(mt);
  }
  /* Every next call */
  else {
    window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
  }
</script>

If your checkout only fires one full reload, the main tag will be called just once, and only one natural pageview will be sent.

We thus only collect:

• shop.com/checkout/

Instead of:

• shop.com/checkout/step1
• shop.com/checkout/step2
• shop.com/checkout/step3
• shop.com/checkout/step4

To achieve this result, it is necessary to:

1. Change the natural pageview URL (the first that was sent)

2. Send an artificial pageview for every step

Here is the corresponding code, which uses the setPath function and artificial pageviews:

/* 1. Change the natural URL pageview, before loading the main tag */

window._uxa = window._uxa || [];
window._uxa.push(['setPath', 'checkout/step1']);

(function() {
   var mt = document.createElement("script"); mt.type = "text/javascript"; mt.async = true;
   mt.src = "//t.contentsquare.net/uxa/YOUR_TAG_ID.js";
   document.getElementsByTagName("head")[0].appendChild(mt);
})();

/* ... Step Change Event ... */

/* 2. Send an artificial page for every step change*/

window._uxa = window._uxa || [];
window._uxa.push(['trackPageview', 'checkout/step' + n]);

/* Repeat step 2 as much as required */