sử dụng Javascript trong mã theo dõi sự kiện Google Analytics để tự động đặt tên danh mục

Question

Vì vậy, tôi đang cố gắng triển khai một số theo dõi sự kiện phân tích trên google trên các trang được tạo động. Tôi sẽ sử dụng một cái gì đó giống như

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

Tôi đang tự hỏi là nó có thể sử dụng giống như document.title để tự động tạo ra các phần chủng loại mã GA từ tiêu đề html của trang? Tất cả các trang đều sử dụng các tiêu đề độc đáo và sẽ tuyệt vời nếu các sự kiện được theo dõi trên các trang đó có thể hiển thị trong GA dưới dạng các mục riêng biệt và không chỉ là danh mục.

Answer 1

Đó là khó khăn hơn tôi mong đợi. Hy vọng nó giúp.

Live demo with examples

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> 

Vị trí ràng buộc xảy ra ở đây và cho phép jquery tiêu thụ vị trí đúng cách.

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

cách tiếp cận sử dụng của bạn là chính xác nhưng bạn phải lấy vị trí sớm hơn để đưa nó vào ga. Có vẻ như anyways định dạng này

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

Bạn sẽ đi đúng hướng.

Đây là một nỗi buồn thú vị. Điều đó sẽ cung cấp cho bạn quyền truy cập vào location.href nơi bạn muốn cần sau này. Ý tưởng là tạo thành một ràng buộc sau khi DOM sẵn sàng nhưng trước khi thực thi _gaq.