Support » Plugin: Google Tag Manager for WordPress » Products won’t open in new tabs on Mac

  • Hello,

    There are the following problems on MacOS devices:

    1. On Mac, when Command + click is on a product in an archive page, it has a delay for a second or two and then open in the same page instead of a new tab.

    2. On iPhone, when clicking a product in an archive page, nothing happens.

    I can see you prevent the default handling and use custom in the gtm4wp_woocommerce_enhanced_ecom_product_click function. I assume the new window you are trying to create gets blocked anyway. Can you please have a look?

    I do not quite understand why a custom handling is needed. What happens if we remove the preventDefault and the eventCallback which opens the new tab?

    Regards,
    Igor

Viewing 7 replies - 1 through 7 (of 7 total)
  • I’m having a similar problem.

    One user reported the following (I’ve put in “s so that you can read his report without this editor messing with things too much):

    
    Okay found the "bug" (intentional, bad design):
    
    "a.button.more-info" click handlers.
    
    "$( ".products li:not(.product-category)
    a:not(.add_to_cart_button),.widget-product-item' ).click(function(
    event ) {"
    
    You call "event.preventDefault();" which disables the browsers ability
    to follow the "href" it has been given for the link.
    
    You then attempt to redirect with "document.location.href =
    productdata.data( "gtm4wp_product_url" )"
    
    AFTER your ecommerce package has tracked the click (in the callback)
    from it's response.
    (this is why your A/B testing never showed an issue, you didn't count
    anyone with an issue)
    
    I have enabled enough javascript to have your site function, I made an
    order just fine, but these links are blocked from working by your
    tracking code.
    
    I guess the "dataLayer" part is on a separate domain somewhere and
    without that loaded these functions (which are on your domain) do not
    gracefully fall-back to using the original <code>href</code> (as HTML always
    intended).
    
    "event.preventDefault();" is always run when this link is clicked,
    regardless of if <code>dataLayer</code> exists or not.
    
    • This reply was modified 4 years, 8 months ago by sashen.
    • This reply was modified 4 years, 8 months ago by sashen.
    Thread Starter skoldin

    (@skoldin)

    The “dataLayer” part is an object in the global scope. It is not on a separate domain and the dataLayer contains exactly the same data when these functions are commented out, so default links handling is not preventing pushing the data to the dataLayer. So I wonder, what is the reason behind adding those functions, are they necessary and how can we fix this iOS issue?

    Plugin Author Thomas Geiger

    (@duracelltomi)

    Hi Everyone,

    In most cases this kind of behavior is caused by active ad blockers. Ad blockers usually also block GTM which prevents the codes of my plugins to work properly.

    What I did is that I added an additional check in the product click handler so that if GTM is blocked, the click on the product won’t get blocked too.

    I would be happy if you could test this on your websites:
    https://raw.githubusercontent.com/duracelltomi/gtm4wp/master/integration/woocommerce.php

    Thanks,
    Thomas Geiger

    Thread Starter skoldin

    (@skoldin)

    Hi Thomas,

    I updated and received feedback that it is not working correctly when on mac on either chrome, firefox or safari when clicking on command and then click the products (i.e. there is a second or two delay and then it opens up in the current page instead of opening up a new one).

    Can you please shed some light why it is needed to prevent the default links behavior and then emulate it? From my observation, the data is pushed to the datalayer variable just the same if we allow default behavior.

    Regards,
    Igor

    Plugin Author Thomas Geiger

    (@duracelltomi)

    Hi Igor,

    If I do not use the preventDefault() call, the browser could move on to the next page while clicking on a product without GTM leaving the option to finish firing tags.

    Normally, the eventTimeout variable should guarantee that the eventCallback function will be called regardless of whether GTM success firing all connected tags or not.

    Could you ask you user to check whether my sandbox site woo.duracelltomi.hu is working for them or not?

    Thomas

    Thread Starter skoldin

    (@skoldin)

    Hi Thomas,

    Sure, he checked and confirmed that the issue exists on woo.duracelltomi.hu as well.

    Ok, I suppose now I see why the links are opened in the same window after a delay. First, you are trying to catch the pressed ctrl with var ctrl_key_pressed = event.ctrlKey. However, this won’t work on Mac because they press cmd instead of ctrl so you need to check for Cmd. So, what is happening next as far as I understand:

    // this is going to be false because it is not ctrl, _productpage won't be assigned
    if ( ctrl_key_pressed ) {
     var _productpage = window.open( 'about:blank', '_blank' );
    }
    'eventCallback': function() {
    if ( ctrl_key_pressed && _productpage ) { // false
      _productpage.location.href= productdata.data( 'gtm4wp_product_url' );
    } else { // the url will open in the same tab
      document.location.href = productdata.data( 'gtm4wp_product_url' )
      }
    },
    'eventTimeout': 2000 // after 2000ms

    In regards to iOS devices (iPad, iPhone), perhaps, window.location.href is not working and nothing is happening when we click a link. I did a quick research and it seems people do have troubles with assigning an URL with JS on iOS devices.

    What do you think?

    For some reason, my reply is gone after editing it so I resubmit.

    Regards,
    Igor

    Thread Starter skoldin

    (@skoldin)

    Hi Thomas,

    Any updates on this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Products won’t open in new tabs on Mac’ is closed to new replies.