Analytics
1.8K members online now
1.8K members online now
Dive into multiple domain (Cross/Sub) tracking, implementing Ecommerce and Enhanced Ecommerce, setting up Event tracking, and Universal Analytics code.
 
Guide Me
star_border
Reply

Implementing Virtual Pageviews for Onepage Checkout Page

Follower ✭ ☆ ☆
# 1
Follower ✭ ☆ ☆

Hi there,

I'm working on linking our Google Analytics closer with our website,
http://www.csselectronics.com/screen/product

One challenge that we face is to track each of the 'check out' steps (i.e. Cart: Step 01, Cart: Step 02, ..., Order Confirmation).

I've read that this can be done using virtual pageviews, but I struggle on how to implement this. My hypothesis is that we may utilize the page title, which shows each step of the checkout process. However, in Google Analytics, the URL simply shows a dynamic link ala 'checkout.smoolis.com/process/...' for each step (with the ... being a random code of numbers). As such, I would need to send a "virtual" URL that links the page title to the URL e.g. to fix this.

Does anyone have a suggestion on how I can implement this? Including basics like whether I put the code in the header, body, etc.

Highly appreciate the help!

Thanks,

Martin

1 Expert replyverified_user
1 ACCEPTED SOLUTION

Accepted Solutions
Marked as Best Answer.
Solution
Accepted by topic author Martin F
November 2015

Re: Implementing Virtual Pageviews for Onepage Checkout Page

Top Contributor
# 3
Top Contributor

Hi Martin,

 

You can implement virtual pageviews that would work based on the page title.
Just add a simple javascript like below for each step:

<script>
var title = document.getElementsByTagName("title")[0].innerHTML;
if (title == "Cart: Step 02") {
ga('send', 'pageview', '/step-2');
}
</script>

You can then add these virtual pageviews as funnel steps for your checkout goal.

Please check the document here: https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications#vi...

Hope this helps.

 


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

View solution in original post

Re: Implementing Virtual Pageviews for Onepage Checkout Page

Explorer ✭ ✭ ☆
# 2
Explorer ✭ ✭ ☆
Hi Martin,

Virtual page view is something is used to track a particular action within a screen, You can also use event tracking too, where there is no change in the URL.

Here is the link to understand the this tracking.

https://developers.google.com/analytics/devguides/collection/analyticsjs/pages

You can see format of URL is a string, no need to send the URL that appearing on the broowser,, you can customise the string according to your desired and send it to GA.

Make sure of using the same string in case of creating funnel report.
Marked as Best Answer.
Solution
Accepted by topic author Martin F
November 2015

Re: Implementing Virtual Pageviews for Onepage Checkout Page

Top Contributor
# 3
Top Contributor

Hi Martin,

 

You can implement virtual pageviews that would work based on the page title.
Just add a simple javascript like below for each step:

<script>
var title = document.getElementsByTagName("title")[0].innerHTML;
if (title == "Cart: Step 02") {
ga('send', 'pageview', '/step-2');
}
</script>

You can then add these virtual pageviews as funnel steps for your checkout goal.

Please check the document here: https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications#vi...

Hope this helps.

 


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

Re: Implementing Virtual Pageviews for Onepage Checkout Page

[ Edited ]
Follower ✭ ☆ ☆
# 4
Follower ✭ ☆ ☆

 

Edited: Arnold, your solution works! Thanks a ton, this seems to be exactly what I needed!

 

One question: Is there something I should be aware of in terms of e.g. duplicated sends (i.e. I've read somewhere that I should also use the ga('set', ...) function to avoid some potential issues here. If not, I'll just utilize your script.

 

Thank you again!

 

Martin

Re: Implementing Virtual Pageviews for Onepage Checkout Page

Top Contributor
# 5
Top Contributor

To avoid tracking the "real" page views on each reload change the code like this:

var title = document.getElementsByTagName("title")[0].innerHTML;
if (title == "Cart: Step 02") {
ga('set', 'page', '/step-2');
}

Add the javascript before the 

ga('send', 'pageview');

command. Let me know if you have any more questions.


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

Re: Implementing Virtual Pageviews for Onepage Checkout Page

Visitor ✭ ✭ ✭
# 6
Visitor ✭ ✭ ✭
Hi again - if I use the 'set' method, should I then remove the other code snippet you posted before?

Ie now I first run a conditional 'set' code, then a conditional 'send' as in your original post and then finally the unconditional send code.
I assume I should remove the conditional send part of the code, but let me know if I misunderstood it.

Also, in the above mentioned setup I get two odd happenings:
1) in my funnel it an occur that people enter the funnel at 'cart 01' and then 100% exit (based on low volume) - yet despite people apparently clicking 'Add to cart' and thus enter the funnel, the page content site does not show any occurrences of the /cart 01 url..
2) In my unfiltered test profile I can manage to get the funnel to work with the above code, though I have a lot of cases where the user (myself) exit a stage eg cart 02 - yet the exit is to /cart 03 which is also the next step in the funnel.. Any idea why this happens?

Thanks!

Re: Implementing Virtual Pageviews for Onepage Checkout Page

Top Contributor
# 7
Top Contributor
Hi,

Yes, you need to remove the conditional "send" when you use the conditional "set" code.

I checked your code, you need to remove the conditionals containing the "send" commands. You are sending duplicate hits and most likely this messes up your funnel. Please let me know when the code is removed so I can take another look at it.

Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

Re: Implementing Virtual Pageviews for Onepage Checkout Page

Follower ✭ ☆ ☆
# 8
Follower ✭ ☆ ☆

Hi again Arnold - and once again thanks for your input!

 

I've now adjusted the code and I believe it works correctly.

However, I have an extra issue on my approach to tracking the "goal funnel" towards my checkout page.

 

The website I'm running is here: http://www.csselectronics.com/screen/product

 

When you press "Add to Cart" in the bottom of page 1, you will arrive the 1st cart step with the tab title called "Cart: Step 01" - which is one of the pages I send a virtual pageview for.

My challenge is that the user on this page will choose Country and Shipping Method - and in doing so, they page will re-load once for each of the choices. This implies that before the user can move to Step 2, there will be "3 hits" on Cart: Step 01, which is a big disruption to the funnel as I start the funnel on Step 1, meaning that several "fake exits" seem to occur.

 

Is there a way around this - i.e. avoiding that the code sends hits when the page is simply "refreshed" (e.g. if the page title is the same as the prior page title)? Or can I avoid this in another way (I guess I could extend my funnel to have "three steps" that repeat Cart: Step 01 e.g. to reflect this process.

 

Your help is greatly appreciated!

 

Martin

Re: Implementing Virtual Pageviews for Onepage Checkout Page

Follower ✭ ☆ ☆
# 9
Follower ✭ ☆ ☆

Hi again,

 

I'm thinking that it might be possible to send unique page views for the different steps despite the page title being the same.

From what i can digest in the source code, there is a change in the code when a country is selected from the dropdown list.

 

In particular, the code of the country selected changes as below (Albania has been selected):

 

<option value="AF" class="DropdownListOption">Afghanistan</option>

<option value="AL" selected class="DropdownListOption">Albania</option>

<option value="DZ" class="DropdownListOption">Algeria</option>

 

Is  there some way that I could adjust the conditional statement in the script to e.g. say that a virtual pageview is only sent if no country and no shipping option has been selected?

I.e. if I could add a line in the script to check if the country and shipping classes are "blank" in the statement, I could ensure that a pageview is only sent on the first occurence of this page.

 

Highly appreciate any input on this Smiley Happy

 

Martin

 

 

Re: Implementing Virtual Pageviews for Onepage Checkout Page

Top Contributor
# 10
Top Contributor

Hi Martin,

 

You can check if an option has been selected using a javascript code like this:

window.onload=function() {
if ((document.getElementById("mySelect").selectedIndex != -1) && (title == "Cart: Step 01"))  {  
	//conditional code goes here
}
}

It is checking if the dropdown with the id of "mySelect" has an option selected and if the page title is "Cart: Step 01".

Let me know if you need help with this.


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital