javascript - para - rel noopener que significa

target=_blank no funciona con el seguimiento de enlaces salientes de GA

Question

Deseo hacer un seguimiento de los clics en los enlaces salientes e implementar el siguiente código:

Código GA

var trackOutboundLink = function(url) {
   ga(''send'', ''event'', ''outbound'', ''click'', url, {''hitCallback'':
     function () {
     document.location = url;
     }
   });
}

Campo de golf

<a class="postLinks" href="<?php if (get_field(''source_link'')) echo get_field(''source_link''); ?>" onclick="trackOutboundLink(''<?php if (get_field("source_link")) echo get_field("source_link"); ?>''); return false;"><?php the_title(); ?></a>

objetivo = _blank

Agrego el atributo target=_blank través de jQuery en función de si el visitante del sitio web marca una casilla de verificación o no (la selección se almacena en una cookie). Sin embargo, si elijo abrir el enlace de salida en una nueva ventana, no funciona. Al marcar la casilla, agrega correctamente el atributo de destino al enlace, pero cuando hago clic en el enlace, lo abre en la misma ventana.

Enlaces con el atributo de destino

<a class="postLinks" href="<?php if (get_field(''source_link'')) echo get_field(''source_link''); ?>" onclick="trackOutboundLink(''<?php if (get_field("source_link")) echo get_field("source_link"); ?>''); return false;" target="_blank"><?php the_title(); ?></a>

¿Alguna idea?

Answer 1

Solo quiero apoyar la respuesta anterior de Guy Guy Winnipeg. No me deja comentar, ¡pero su solución funciona!

El código sugerido por Google (no funciona para abrir el enlace en una pestaña nueva) es:

var trackOutboundLink = function(url) {
   ga(''send'', ''event'', ''outbound'', ''click'', url, {
     ''transport'': ''beacon'',
     ''hitCallback'': function(){document.location = url;}
 });
}

:

<a href="http://www.example.com" onclick="trackOutboundLink(''http://www.example.com''); return false;">Check out example.com</a>

Sin embargo, si cambia "document.location = url;" a "document.location = href;" y en la etiqueta de enlace, cambie "return false;" para "volver verdadero"; y agregue "target =" _ blank ", el enlace se abrirá en una nueva pestaña y rastreará el enlace de salida.

Entonces, el código que funciona es:

var trackOutboundLink = function(url) {
  ga(''send'', ''event'', ''outbound'', ''click'', url, {
    ''transport'': ''beacon'',
    ''hitCallback'': function(){document.location = href;}
 });
}

:

<a href="http://www.example.com" onclick="trackOutboundLink(''http://www.example.com''); return true;" target="_blank;">Check out example.com</a>

Answer 2

Tener target = "_ blank" en un enlace no hará nada si está cambiando la URL de la página mediante JavaScript al cambiar document.location.

Sin embargo, solo necesita usar hitCallback cuando rastrea un enlace interno. Si tiene un enlace externo y, por lo tanto, target = "_ blank", su pestaña original permanece abierta, y el evento de seguimiento ga se completará normalmente, no tiene que preocuparse por asegurarse de que finalice antes de cargar la nueva página.

Por lo tanto, creo que le gustaría cambiar su manejador de clics para que sea este:

var trackOutboundLink = function(url, isExternal) {
    var params = {};

    if (!isExternal) {
        params.hitCallback = function () {
            document.location = url;
        }
    }
    ga(''send'', ''event'', ''outbound'', ''click'', url, params);

    return isExternal;
}

Y cuando adjuntas esto como el manejador de clics

onclick="return trackOutboundLink(urlGoesHere, isExternalGoesHere)"

Ejemplos más concretos:

<a href="/" onclick="return trackOutboundLink(''/'', false)">An internal link</a>
<a href="http://www.example.com/" onclick="return trackOutboundLink(''http://www.example.com'', true)">An external link</a>

Answer 3

Esto hará que todos los enlaces se abran en una nueva ventana:

    var trackOutboundLink = function(url) {
   ga(''send'', ''event'', ''outbound'', ''click'', url, {
     ''transport'': ''beacon'',
     ''hitCallback'': function(){window.open(url);}
   });
}

Solo cambio document.location = url; a window.open(url); código de https://support.google.com/analytics/answer/1136920

también puede cambiar el nombre de la función, y tener uno para los nuevos enlaces de ventana, y uno para los mismos enlaces de ventana. Eso sería cambiar la primera línea a algo así como:

var trackOutboundNewWindow = function(url) {

Y luego el enlace sería

<a href="http://www.example.com" onclick="trackOutboundNewWindow(''http://www.example.com''); return false;">Check out example.com</a>

Answer 4

Encontré una solución (a partir del 6 de febrero de 2016)

<script>
var trackOutboundLink = function(url) {
   ga(''send'', ''event'', ''outbound'', ''click'', url, {
     ''transport'': ''beacon'',
     ''hitCallback'': function(){document.location = href;}
   });
}
</script>

Luego haz que tu enlace se vea así ...

<a href="http://www.example.com" onclick="trackOutboundLink(''label name''); return true;" target="_blank">text</a>

Answer 5

esto funciona:

hitCallback'': function(){window.open(url);}

Espero que el seguimiento del evento no se vea afectado de ninguna manera.

Answer 6

DRY - rastrear todos los anclajes con una clase '' tracked ''. Tenga en cuenta que este código es sensible a los bloqueadores de ventanas emergentes. La llamada window.open debe estar fuera de la llamada ga .

/**
* Function that tracks a click on an outbound link in Analytics.
*/
$(function() {
    //only create event tracking if ga has loaded
    ga(function(){
        $("a.tracked").click(function(e) {
            var url = $(this).attr("href");
            var newWindow = ($(this)[0].target || '''').toLowerCase() === ''_blank'';
            if(newWindow) {
                window.open(url, ''_blank'');
            }
            ga("send", "event", "outbound", "click", url, {
                "hitCallback": function () {
                    if(!newWindow) document.location = url;
                }
            });
            e.preventDefault();
        });
    });
});