usando Javascript dentro del código de seguimiento de eventos de Google Analytics para automatizar la denominación de categorías

Entonces, estoy intentando implementar un seguimiento de eventos de Google Analytics en páginas generadas dinámicamente. Usaré algo como

<script>
$(document).ready(function(){
  $("#button1").click(function(){
    _gaq.push(['_trackEvent', category, action, opt_label, opt_value, opt_noninteraction)']);
  }); 
  $("#button2").click(function(){
    _gaq.push(['_trackEvent', category, action, opt_label, opt_value, opt_noninteraction']);
  });
});
</script>

Me pregunto si es posible usar algo como document.title generar automáticamente la sección de categoría del código GA desde el título html de las páginas? Todas las páginas usan títulos únicos y sería genial si los eventos rastreados en esas páginas pudieran aparecer en GA como entradas separadas y no solo como categoría.

preguntado el 11 de abril de 13 a las 04:04

1 Respuestas

Eso fue más difícil de lo que esperaba. Espero eso ayude.

Demostración en vivo con ejemplos

javascript

// Unbind default behaviour
    $(document).off("ready.ga").on("ready", function () {
        //hollow out
        pageLoc = $(location).attr('href');
        // Introduce helper functions.

        (function ($, window, undef) {
            // ga selector.

            $.extend($.expr[":"], {
                ga: function (a) {
                    var attr = a.attributes,
                        len = attr.length;

                    while (len--) {
                        if (attr[len].name.indexOf("data-ga-") !== -1) {
                            return true;
                        }
                    }

                    return false;
                }
            });

            $.gaaApi = {
                trackEvent: {
                    event: {
                        value: "_trackEvent",
                        validation: "isString",
                        type: "string"
                    },
                    category: {
                        value: null,
                        validation: "optString",
                        type: "currentloc"
                    },
                    action: {
                        value: null,
                        validation: "optString",
                        type: "string"
                    },
                    label: {
                        value: null,
                        validation: "optString",
                        type: "string"
                    },
                    value: {
                        value: null,
                        validation: "optInt",
                        type: "integer"
                    },
                    nonInteraction: {
                        value: null,
                        validation: "optBool",
                        type: "boolean"
                    }
                },
                trackPageview: {

                    event: {
                        value: ["trackPageview", $(location).attr('href')],
                        validation: "isString",
                        type: "string"
                    },
                    url: {
                        value: undef,
                        validation: "optString",
                        type: "string"
                    }
                }
            };

            var validation = {

                isString: function (obj) {

                    var empty = true;

                    if (obj && typeof obj === "string") {
                        empty = /^\s*$/.test(obj);
                    }
                    // If empty === true then something is wrong and we should return false.
                    return !(empty);

                },

                optString: function (obj) {
                    if (obj === undef) {
                        return true;
                    }

                    return validation.isString(obj);
                },

                isInt: function (obj) {
                    return (/^[\-+]?\d+$/).test(obj) || (obj === +obj && obj === (obj | 0));
                },

                optInt: function (obj) {

                    if (obj === undef) {
                        return true;
                    }

                    return validation.isInt(obj);
                },

                isFloat: function (obj) {

                    return (/^[\-+]?\d+(\.\d+)?$/).test(obj) || (obj === +obj && obj !== (obj | 0));
                },

                optFloat: function (obj) {
                    if (obj === undef) {
                        return true;
                    }

                    return validation.isFloat(obj);
                },

                isBool: function (obj) {
                    return (obj === true || obj === "true") || (obj === false || obj === "false");

                },

                optBool: function (obj) {

                    if (obj === undef) {
                        return true;
                    }

                    return validation.isBool(obj);
                }
            },

            methods = {

                validate: function (param, name, location) {

                    var $element = this.$element,
                        data = $element.data("ga-" + name.toLowerCase()),
                        isValid;
                    //pageLoc = $(location).attr('href');

                    if (!validation[param.validation]) {

                        throw new TypeError("Unknown validation type");
                    }

                    // Check the value.
                    isValid = validation[param.validation](data);

                    if (!isValid) {

                        throw new Error("object validation error on " + name);
                    }

                    // Assign the value.
                    // Some analytics methods accept numbers as strings so we check the return type.
                    switch (param.type) {
                        case "integer":
                            return data ? parseInt(data, 10) : null;
                        case "float":
                            return data ? parseFloat(data) : null;
                        case "boolean":
                            return data ? Boolean(data) : null;
                        case "currentloc":
                            return data;
                        default:
                            // Default to string.
                            return data ? data + "" : null;
                    }

                },
                createArgs: function () {

                    var binder = this,
                        event = this.event,
                        args = $.map(event, function (val, key, pageLoc) {
                            var pageLoc = $(location).attr('href');


                            var value;

                            if (key === "event") {
                                // We don't want to check for the event property in the DOM.
                                value = val.value;

                            } else {

                                // Validate and return the correct value from the DOM.
                                value = methods.validate.call(binder, val, key, pageLoc);

                            }

                            return value;
                        });

                    return args;
                }
            },

            gaa = function (element, options) {

                this.$element = $(element);
                this.options = $.extend({}, $.fn.gaa.defaults, options);
            };

            gaa.prototype = {
                constructor: gaa,
                trackEvent: function () {
                    var trackedEvent = $.Event("tracked.ga");
                    var currentLoc = $(location).attr('href');

                    this.args = methods.createArgs.call(this);

                    if (this.options.logit) {

                        if (window.console && window.console.log) {

                            // Push the data.
                            console.log("pushing to Google analytics", this.args);
                            this.$element.trigger(trackedEvent).trigger(currentLoc);

                            // this.$element.trigger(currentLocation);

                        }
                    } else {

                        var gaq = window._gaq;

                        if (gaq) {

                            // Set the context for our deferred callback.
                            var binder = this;

                            // Push the data.
                            $.when(gaq.push(args)).done(

                            function () {

                                this.$element.trigger(trackedEvent);

                                //    this.$element.trigger(trackedEvent);


                                // Redirect the location - delayed so that any other page functionality has time to run.
                                setTimeout(function () {
                                    var href = binder.attr("href");

                                    if (href && href.indexOf("#") !== 0) {
                                        window.location = href;
                                    }

                                }, 100);
                            });

                        } else {
                            throw new ReferenceError(" _gaq not there");
                        }
                    }
                }

            };

            // wrapper definition 
            $.fn.gaa = function (options) {
                return this.each(function () {

                    var $this = $(this),
                        data = $this.data("ga"),
                        opts = typeof options === "object" ? options : null;


                    if (!data) {
                        // Check the data and assign if not present.
                        $this.data("ga", (data = new gaa(this, opts)));
                    }

                    // Run the appropriate function is a string is passed.
                    if (typeof options === "string") {

                        data[options]();

                    } else {

                        var handler = data.options.handler.toLowerCase(),
                            // Check for the event attr here as it might be other than the default.
                            event = data.$element.attr("data-ga-event");

                        // Overwrite if necessary.
                        $.extend(data.options, {
                            event: event
                        });

                        // Build the data as we have nothing there.
                        // First assign the event.
                        data.event = $.gaaApi[data.options.event];

                        // Then bind the handler.
                        if (handler === "load") {

                            data.trackEvent();

                        } else {

                            data.$element.on(handler + ".ga", function (e) {

                                e.preventDefault();
                                data.trackEvent();
                            });
                        }
                    }
                });
            };

            // Define the defaults.
            $.fn.gaa.defaults = {
                event: ["trackEvent", "giveLocation"],
                handler: "load",
                logit: false
            };

            // Set the public constructor.
            $.fn.gaa.Constructor = gaa;

            // Let's BEGIN
            $(document).on("ready.ga", function () {

                // Bind using the custom selector.
                $(":ga").each(function () {
                    $(this).gaa();
                });
            });

        }(jQuery, window));


        // Set some options the ones below are the defaults.
        var options = {
            event: "trackEvent", // The event name unprefixed. 
            handler: "click", // The eventhandler to trigger the tracking. 
            // Using 'load' will track immediately.
            logit: true, //to logit

        };

        var options2 = {
            event: "trackPageview", // The event name unprefixed. 
            handler: "click", // The eventhandler to trigger the tracking. 
            // Using 'load' will track immediately.
            logit: true, //to logit
        };

        var options3 = {
            event: "trackPageview", // The event name unprefixed. 
            handler: "load", // The eventhandler to trigger the tracking. 
            // Using 'load' will track immediately.
            logit: true //to logit
        };

        // Binds using the custom selector.  

        $("load.trigger").gaa(options3); //fires a ga onload after domready
        $("button.button1").gaa(options2).click(function () {
            console.log('\nmore button events\n', 'heres the URL:', location.href)
        });

        $("#clickme").gaa(options).click(function () {
            $(this).toggleClass("changeIt");
        });


    });

index.html

<load class="trigger">loading triggers ga event</load>
<button class="button1">fire ga event with address</button>
<button class="button1" id="clickme">multiple events</button>

El enlace de ubicación ocurre aquí y permite que jquery consuma la ubicación correctamente.

                  event: {
                            value: ["trackPageview",$(location).attr('href')],
                            validation: "isString",
                            type: "string"
                         }

su enfoque de usar esto fue correcto, pero tuvo que obtener la ubicación antes para que entrara en ga. Parece que de todos modos este formato

 $("#button").gaa(options).click(function () {
            $(this).toggleClass("changeIt");
        });

Te pondrá en marcha en las direcciones correctas.

Este fue un divertido dolor de cabeza. Eso debería darle acceso a location.href donde desee necesitarlo más adelante. La idea es formar un enlace después de que DOM esté listo pero antes de la ejecución de _gaq.

Respondido 13 Abr '13, 08:04

Después de investigar más, tendré que usar location.href para devolver la cadena de URL que quiero. - user2268663

Tampoco estoy seguro de si su código hará exactamente lo que quiero. Me gustaría tomar el resultado de var the_cat = link.href y reemplace "categoría" en el código ga con dicho resultado. ejemplo _gaq.push(['_trackEvent', the_cat, action, opt_label, opt_value, opt_noninteraction']); Disculpas si te estoy malinterpretando. soy nuevo en esto ¡Gracias por tu ayuda! - user2268663

Para cualquier otra persona con un problema similar, encontré este enlace que ayudó a arrojar algo de luz sobre las cosas: stackoverflow.com/questions/9275036/… - user2268663

De acuerdo, haré algunas ediciones basadas en mi nueva interpretación de su pregunta. Estoy bastante seguro de que veo a lo que te refieres ahora. jusynth

gracias le agradezco su tiempo! Actualización: tengo el código funcionando en GA: realiza un seguimiento exitoso de los eventos al hacer clic en un enlace de prueba. ` $("a.test").click(function(){ _gaq.push(['_trackEvent', 'External Links', 'Click', $(this).attr('document.url')]); });` reemplazando document.url con location.href, ambos devuelven (no configurados) dentro de Google Analytics. Así que ahí es donde estoy... - user2268663

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.