IMPORTANT: please add support for onepage checkout tracking

[phildpearce]

This is a very important feature request.

Adding this via customHTML breaks functionality, thus please add as an inline code to replicate the native Magento functionality for onclick events within the accordion.

<script type="text/javascript">
//<![CDATA[
    var accordion = new Accordion('checkoutSteps', '.step-title', true);
            accordion.openSection('opc-login');
            var checkout = new Checkout(accordion,{
        progress: 'https://www.supersup.com/checkout/onepage/progress/',
        review: 'https://www.supersup.com/checkout/onepage/review/',
        saveMethod: 'https://www.supersup.com/checkout/onepage/saveMethod/',
        failure: 'http://www.supersup.com/checkout/cart/'}
    );
    checkout.accordion.originalOpenSection = checkout.accordion.openSection;
    checkout.accordion.openSection = function(section) {
        var currentSection = this.currentSection;
        var section = $(section);
        this.originalOpenSection(section);
        if (Element.hasClassName(section, 'allow') && section.id != currentSection) {
            var checkoutStepId =  section.readAttribute('id').replace('opc-', '');

                            // GTM trackPageview for checkout steps
            dataLayer.push({'event':'onclick_trackPageview', 'page_virtual':'/checkout/onepage/' + checkoutStepId});

        }
    };
//]]>
</script>

[CVM]

You've not said where this code is from, but I'd hazard a guess it's from template/checkout/onepage.html. Original code looks like this in v1.7:

<script type="text/javascript">
//<![CDATA[
    var accordion = new Accordion('checkoutSteps', '.step-title', true);
    <?php if($this->getActiveStep()): ?>
    accordion.openSection('opc-<?php echo $this->getActiveStep() ?>');
    <?php endif ?>
    var checkout = new Checkout(accordion,{
        progress: '<?php echo $this->getUrl('checkout/onepage/progress') ?>',
        review: '<?php echo $this->getUrl('checkout/onepage/review') ?>',
        saveMethod: '<?php echo $this->getUrl('checkout/onepage/saveMethod') ?>',
        failure: '<?php echo $this->getUrl('checkout/cart') ?>'}
    );
//]]>
</script>

What you've posted is quite a departure from the original code. I would guess this isn't working more likely because of an issue with the new code rather than specifically the dataLayer.push() call. I'd expect this to work fine, as there's nothing special about how the extension includes the gtm.js code (though if there are problems, it's likely related to issue #16).

On topic, tracking these steps would be a good idea, but I'm loathe to tie it to specific GA-centric terminology. The dataLayer should simply tell you that something has happened. How you act on it is up to you - you might not always be dealing with GA, for example.

I'll add onepage checkout step tracking to the roadmap. I'll need to think of an elegant solution that doesn't involve template modifications to inject the desired code. When done, each step will fire something like the following:

dataLayer.push({event:'checkoutStep',checkoutStepName:'shipping'});

[phildpearce]

Thanks for the reply :)

Its magento V1.2

If you click add to basket >> checkout you can see the hardcoded
accordion fix.
http://www.supersup.com/xlear-spry-sugarfree-chewing-gum-cinnamon-10-pieces-700596000643?utm_source=TEST

Thanks

Phil.

 <script type="text/javascript">
 //<![CDATA[
     var accordion = new Accordion('checkoutSteps', '.step-title', 

true);
accordion.openSection('opc-login');
var checkout = new Checkout(accordion,{
progress:
'https://www.supersup.com/checkout/onepage/progress/',
review: 'https://www.supersup.com/checkout/onepage/review/',
saveMethod:
'https://www.supersup.com/checkout/onepage/saveMethod/',
failure: 'http://www.supersup.com/checkout/cart/'}
);
checkout.accordion.originalOpenSection =
checkout.accordion.openSection;
checkout.accordion.openSection = function(section) {
var currentSection = this.currentSection;
var section = $(section);
this.originalOpenSection(section);
if (Element.hasClassName(section, 'allow') && section.id !=
currentSection) {
var checkoutStepId =
section.readAttribute('id').replace('opc-', '');
// GTM trackPageview for checkout steps
dataLayer.push({'event':'onclick_trackPageview',
'page_virtual':'/checkout/onepage/' + checkoutStepId});

         }
     };
 //]]>
 </script>

On 08/04/2014 21:25, Chris Martin wrote:

You've not said where this code is from, but I'd hazard a guess it's
from template/checkout/onepage.html. Original code looks like this in
v1.7:

<scripttype="text/javascript">
//getActiveStep()): ?> accordion.openSection('opc-getActiveStep() ?>'); var checkout = new Checkout(accordion,{ progress: 'getUrl('checkout/onepage/progress') ?>', review: 'getUrl('checkout/onepage/review') ?>', saveMethod: 'getUrl('checkout/onepage/saveMethod') ?>', failure: 'getUrl('checkout/cart') ?>'} ); //]]>
</script>

What you've posted is quite a departure from the original code. I
would guess this isn't working more likely because of an issue with
the new code rather than specifically the dataLayer.push() call. I'd
expect this to work fine, as there's nothing special about how the
extension includes the gtm.js code (though if there are problems, it's
likely related to issue #16
#16).

On topic, tracking these steps would be a good idea, but I'm loathe to
tie it to specific GA-centric terminology. The dataLayer should simply
tell you that something has happened. How you act on it is up to you -
you might not always be dealing with GA, for example.

I'll add onepage checkout step tracking to the roadmap. I'll need to
think of an elegant solution that doesn't involve template
modifications to inject the desired code. When done, each step will
fire something like the following:

dataLayer.push({event:'checkoutStep',checkoutStepName:'shipping'});

—
Reply to this email directly or view it on GitHub
#14 (comment).