5

そのため、動的に生成されたページに Google アナリティクス イベント トラッキングを実装しようとしています。私は次のようなものを使用します

<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>

document.titleページのhtmlタイトルからGAコードのカテゴリセクションを自動生成するようなものを使用することは可能でしょうか? すべてのページで独自のタイトルが使用されており、これらのページで追跡されたイベントがカテゴリだけでなく個別のエントリとして GA に表示されるとよいでしょう。

4

1 に答える 1

4

思ったより大変でした。それが役に立てば幸い。

例を含むライブデモ

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>

ここで場所のバインドが行われ、jquery が場所を適切に使用できるようになります。

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

これを使用するというあなたのアプローチは正しかったのですが、それを ga に入れるには、以前に場所を取得する必要がありました。とにかくこのフォーマットのようです

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

正しい方向へと導いてくれます。

これは楽しい頭の体操でした。これにより、後で必要な場所で location.href にアクセスできるようになります。考え方としては、DOM の準備ができてから _gaq を実行する前にバインドを形成するというものです。

于 2013-04-11T04:10:15.537 に答える