This is a bit different from my usual WordPress/PHP posts, but I still wanted to share as a general development exercise and also to hopefully let other people know what I discovered about working with Child’s Play.

Childs Play Logo

I am friends with the couple who runs the Game On Marathon, a 100-hour video gaming marathon which raises money every year for the Child’s Play charity. As part of the festivities when the event is happening, they needed the ability to trigger different giveaways based on when we hit certain milestones in the fundraising effort. There is a C++ script which handles these giveaways, but it needs to be told what dollar amount the event is at and that was game on marathoncurrently being done by hand. Child’s Play has a website widget which displays the info, but there didn’t seem to be a way of easily getting their hands on the donation total at different points in time for the program so they asked if I may be able to help.

At first I tried to scrape the website via remote POST, but that was a bust. Since the Child’s Play widget is driven by a `.js` script include, none of the generated markup was available in the DOM when you hit the page from a remote script. While looking through the js source, however, I found reference to a JSON API endpoint which looked promising. I had initially tried googling for such a thing, but came up empty, so my guess is that this is an API they possibly only mean to use internally / by their own tools.

Continue reading

A client who hosts their own website recently launched a new version of their site, which had been developed in WordPress instead of the static html site they had before. However, they used their web space to host multiple applications in subdirectories on the domain. This was going to cause problems with WordPress and it’s rewrite rules, since the permalinks may have conflicted with the names of the physical directories where the other applications lived.

For most people’s WordPress installations running on a *nix platform, you would need to go into the `.htaccess` file and insert this RewriteRule above all other rules.

RewriteRule ^(images|intranet)($|/) - [L]

However, this client was hosting their site using Windows so we needed to figure out a way to make the same change under IIS, using the `web.config` file instead. After some digging and testing, we found it only takes a single additional line to add exclusions to the rewrite rules. Here is the full `web.config` file after modification.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="wordpress" patternSyntax="Wildcard">
          <match url="*" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
            <add input="{REQUEST_URI}" pattern="^/(images|intranet)" negate="true"/>
          </conditions>
          <action type="Rewrite" url="index.php"/>
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

With that one `{REQUEST_URI}` line, you can pipe-delimit all of the top-level directory names that you wish to exclude from the rewrite rules with IIS.

Hopefully this post helps someone else with the same problem!

The Marketing Department had a seemingly simple request: they wanted to implement click events for all links on the website that were pointing to a PDF file. But what’s the best way to do that?

Naturally we’re not going to add the required GA code by hand to every single href on the website. Doing a quick google search, some people accomplish this by adding a custom class to their links and targeting those links. That is fine if you want to categorize different types of links, but in our case we just want a simple, blanket rule that applies to all document links.

The JavaScript – Creating Click Events

So, first things first we need the JavaScript to add click events to every appropriate anchor on the page. Below is my solution, which I saved into my theme’s `/js` directory and called it `google-event-tracking.js`. I added some extra white space here to make it a bit easier to read.

jQuery(function($) {

  // Check if Google Analytics is Loaded
  if (typeof(ga) !== 'undefined') {

    // For every href linking to a pdf file...
    jQuery('a[href$=".pdf"]').each( function() {	

      jQuery(this).click( function(e) {

        var myHref = jQuery(this).attr('href');
        var fileName = myHref.substring(myHref.lastIndexOf("/")+1,myHref.length-4);

        //Pass the name of the file, sans file extension
        ga(['send', 'event', 'PDF', 'download', fileName]);  

      });

    });

  }

});

The WordPress Code

After uploading that file to my website, I just needed to update my `functions.php` and enqueue the new code. Note the use of the third parameter, which tells WordPress that our code requires jQuery to be loaded first.

function dynamic_google_pdf_tracking() {
    wp_enqueue_script(
        'google-event-tracking',
        get_stylesheet_directory_uri() . '/js/google_event_tracking.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'dynamic_google_pdf_tracking' );

And that’s it! All links on the website that point to PDF files will automatically have click events applied to them.