WordPress.org
Get WordPress

Plugin Directory

Changeset 1460390


Ignore:
Timestamp:
07/25/2016 07:25:00 PM (10 years ago)
Author:
lonfirebrand
Message:

refactor: external js, encapsulate functions

Location:
simple-content-experiments/trunk
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed

  • simple-content-experiments/trunk/readme.txt

    r1449272 r1460390  
    138138
    139139== Changelog ==
     140= 2.5.1 =
     141Fix Google Tag Manager firing
     142
    140143= 2.5 =
    141144Fix script order execution issue.

  • simple-content-experiments/trunk/simple-content-experiments.php

    r1449279 r1460390  
    3232       
    3333*/
    34 
    35 
    36 
    37 
     34error_reporting(E_ALL | E_STRICT);
    3835
    3936
    … …  
    5350   
    5451    function enable() {
     52    error_reporting(E_ALL | E_STRICT);
    5553        add_action( 'wp_enqueue_scripts', array($this, 'load_scripts') );
    56        
    5754        add_shortcode('experiment', array($this, 'process_experiment'));
    5855        add_shortcode('ex_variant', array($this, 'process_ex_variant'));
    5956        add_action('the_posts', array($this, 'head_insert_code'));
    60 
    6157    }
    6258
    … …  
    7167        Enque any scripts we might need. (Like jQuery)
    7268    */
    73         wp_enqueue_script( 'jquery' );
    74 
     69        wp_enqueue_script( 'jquery' );
     70        // wp_enqueue_script( plugin_dir_url( __FILE__ ) . 'simple-content-experiments.js');
     71        wp_enqueue_script( 'simple_content_experiments', plugin_dir_url( __FILE__ ) . 'simple-content-experiments.js', array('jquery') );
    7572    }
    7673
    … …  
    145142        echo out the required javascript
    146143    */
     144    // pass the user setting for debug mode into JavaScript
    147145    echo '
    148146    <!-- Pre-flight to test for Content Experiments: -->
    … …  
    156154        return k;
    157155    }
    158 
    159         var content_experiment = {
    160             id: "",
    161             variant_count:0,
    162             selected: 0,
    163             debug: '  . $this->debug_enable . ',
    164             analytics_package: "ua", // default is Universal Analytics
    165             event: {
    166                 category: "experiment",
    167                 action: "select",
    168                 label: "",
    169                 value: 0
    170             },
    171             dbgmsg: function(str){
    172                 if (content_experiment.debug){  console.log(str);}
    173             }
    174         };
    175 
    176         jQuery(document).ready(function() {
    177             var ex_list = {};
    178            
    179             // Determine which version of Google Analytics is being used
    180             if (typeof dataLayer !== "undefined" && typeof dataLayer.push === "function" ) {
    181                 content_experiment.analytics_package = "gtm";
    182             } else if  (typeof _gaq !== "undefined" && typeof _gaq.push === "function") {
    183                 content_experiment.analytics_package = "classic";
    184             }
    185 
    186 
    187             jQuery( ".contentexperimentvariant" ).each(
    188                 function( ) {
    189                     var v_id = jQuery( this ).attr("data-contentexperimentid");
    190                     if(typeof ex_list[v_id] == "undefined") {
    191                         ex_list[v_id] = 0;
    192                     }
    193                     ex_list[v_id]++;
    194                 }
    195             );
    196             // ex_list is object of experiment ID with counts
    197             var keys = Object.keys(ex_list);
    198             if (keys.length > 0){
    199                 // pick an experiment to run on this page:
    200                 var i =  Math.floor((Math.random() * keys.length)); // 0 based
    201                 content_experiment.id = keys[i];
    202                 content_experiment.variant_count = ex_list[content_experiment.id];
    203                 content_experiment.dbgmsg(content_experiment.id);
    204                 jQuery.getScript(
    205                     "//www.google-analytics.com/cx/api.js?experiment=" + content_experiment.id,
    206                     function(){ // callback function after lib is loaded:
    207                         // Ask Google Analytics which variation to show the user:
    208                         content_experiment.selected = cxApi.chooseVariation(); // 0 based options
    209                         // Add some extra data for event tracking:
    210                         for ( i = 1; i <=  content_experiment.variant_count; i++) {
    211                             jQuery("#" + content_experiment.id + "__" + i).find("a").attr("data-xvariant", i);
    212                             jQuery("#" + content_experiment.id + "__" + i).find("a").addClass("xvariantclick");
    213                         }
    214                         DisplayExperimentVariations();
    215                     }
    216                 )
    217    
    218             }
    219         });
    220    
     156    var simple_content_experiements_debug = ' . $this->debug_enable . ';
    221157
    222158    </script>';
    223     /*
    224     Load the Content Experiment JavaScript API client for the experiment
    225     we're going to go with jquery getScript so we can pass the experiment ID into API.
    226     Otherwise, we can't use chooseVariation() and would have to do a lot more processing
    227     */
    228     echo '<script>
    229     function DisplayExperimentVariations(){
    230     //Execute the chosen view:
    231         var selected_variation = content_experiment.selected;
    232        content_experiment.dbgmsg("chosenExperiment = " +  content_experiment.id + "\nchosenVariation = " + selected_variation);
    233        content_experiment.dbgmsg("number of variations: " + content_experiment.variant_count);
    234             for ( i = 1; i <= content_experiment.variant_count; i++) {
    235                 if ( (i - 1) == selected_variation) { // 0 based
    236                     // content_experiment.dbgmsg("showing variant " + i + content_experiment.id + "__" + i);
    237                     jQuery("#" + content_experiment.id + "__" + i).show();
    238                 } else {
    239                      // content_experiment.dbgmsg("hiding variant " + i + content_experiment.id + "__" + i);
    240                     jQuery("#" + content_experiment.id + "__" + i).remove();
    241                 }
    242             }
    243         // sometimes the scripts load in the wrong order and Google Analytics won\'t get an event from chooseVariation()
    244         // Send any event to analytics to solve this:
    245         content_experiment.dbgmsg("analytics type: " + content_experiment.analytics_package);
    246         switch (content_experiment.analytics_package){
    247             case "classic":
    248                 _trackEvent( // category, action, opt_label, opt_value, opt_noninteraction
    249                     content_experiment.event.category,
    250                     content_experiment.event.action,
    251                     content_experiment.event.label,
    252                     content_experiment.event.value,
    253                     true
    254                 );
    255                 content_experiment.dbgmsg("_trackEvent  posted ");
    256                 break;
    257                
    258             case "gtm":
    259                 dataLayer.push({
    260                       "event" : "GAEvent",
    261                       "eventCategory" : content_experiment.event.category,
    262                       "eventAction" : content_experiment.event.action,
    263                       "eventLabel" : content_experiment.event.label,
    264                       "eventValue" : content_experiment.event.value,
    265                       "nonInteraction": true
    266                 });
    267                 content_experiment.dbgmsg("dataLayer.push  posted ");
    268                 break;
    269                
    270             default:
    271                 var ga_name = "ga";
    272                 if (typeof __gaTracker === "function"){
    273                     ga_name = "__gaTracker";
    274                 }
    275    
    276                  window[ga_name]("send", "event",
    277                     content_experiment.event.category,
    278                     content_experiment.event.action,
    279                     content_experiment.event.label,
    280                     content_experiment.event.value,
    281                     { nonInteraction: true }
    282                 );
    283                 content_experiment.dbgmsg( ga_name + " event posted ");
    284         }
    285        
    286     }
    287     </script>
    288     ';
     159
    289160    }
    290161
    … …  
    298169    }
    299170
    300     function head_insert_code($posts) {
    301     /* ----------------------------------------------------
    302         This function USED TO Check to see if our shortcode exists and insert JavaScript in head if needed.
    303         This cannot be done when shortcodes are processed, because the head has already been built.
    304        
    305         Hooks in the_posts
    306        
    307         This is pretty heavy process to run on each page.
    308         But if we want to move the code to the <head> we have to do this scan-ahead
    309        
    310         Since version 2.0 of the plugin, we've moved this logic to JavaScript which allows any rendered content to use the
    311         the experiment code.
    312        
    313     */
     171function head_insert_code($posts) {
     172/* ----------------------------------------------------
     173Originally, this scanned the page for content blocks before shortcodes were processed.
     174Now, it just insert the equalent client-side logic (JavaScript)
     175
     176Eventually, this could include a filter to choose which pages get tracking
     177
     178*/
    314179        if ( !empty($posts) ) { // if empty, nothing to do look for
    315180                add_action('wp_head', array($this, 'head_javascript'));
Note: See TracChangeset for help on using the changeset viewer.