How To Add Custom Analytics Tracking Code in Jetpack Mobile Theme

»»»How To Add Custom Analytics Tracking Code in Jetpack Mobile Theme
Jetpack plugin supports additional of various useful features to self-hosted WordPress sites and blogs. And one of the feature that can be enabled by Jetpack is Mobile Theme. Jetpack’s mobile theme is optimized for small screens of smartphones and tablets.

Unfortunately, Jetpack’s mobile theme does not offer many customization options, especially in term of looks and feels of mobile website. While it uses the header image, background, and widgets from your current theme for a great custom look, but that’s about it. Jetpack’s mobile theme doesn’t offer any other settings that you can easily customize the layout, insert ads or tracking code and etc.

If you need to insert tracking code for web analytics in WordPress mobile site powered by Jetpack’s mobile theme, you can make sure of many WordPress plugins that insert tracking code into footer (or header) automatically for you. Insertion by plugin will work everywhere, including the Jetpack’s mobile theme.

If you’re relying on the active theme to insert the tracking code for the like of Google Analytics and StatCounter, the analytics tracking code is not added to the mobile theme powered by Jetpack. Try the following trick to add the tracking code to Jetpack’s mobile theme.

  1. Install and activate Functionality plugin, which allows you to add custom functions without relying on theme’s functions.php file, and thus will work in Jetpack’s mobile theme.
  2. Go to Plugins -> Edit Functions, and insert the following code:
    add_action( 'wp_footer', 'tj_tracking_code' );
    function tj_tracking_code() { ?>
    
    <!-- Insert the Tracking Code Here -->
    
    <?php }

    Insert your tracking code from Google Analytics, StatCounter or other web analytics service in place of the <!– Insert the Tracking Code Here –> placeholder.

  3. Save the file.
Note
The trick via Functionality plugin will add tracking code sitewide, i.e. normal desktop site and mobile site. So you have to disable the addition of tracking code via the theme’s option, or modify the code to add the tracking code only when Jetpack’s mobile theme is active:

// Check if we are on mobile
function tj_is_mobile() {
    // Are Jetpack Mobile functions available?
    if ( ! function_exists( 'jetpack_is_mobile' ) )
        return false;
 
    // Is Mobile theme showing?
    if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' )
        return false;
  
    return jetpack_is_mobile();
}

// Add tracking code if we're on mobile
function tj_tracking_maybe_add_filter() {
    // Are we on mobile
    if ( tj_is_mobile() ) :
        add_action( 'wp_footer', 'tj_tracking_code' );
    endif; // End check if we're on mobile
}
add_action( 'wp_head', 'tj_tracking_maybe_add_filter' );
	
// Display tracking code
function tj_tracking_code() { ?>

<!-- Insert the Tracking Code Here -->

<?php }

Insert your tracking code from Google Analytics, StatCounter or other web analytics service in place of the <!– Insert the Tracking Code Here –> placeholder.

By |2016-12-09T08:38:59+00:00December 9th, 2016|Categories: Web Analytics|Tags: , , , , , |4 Comments

About the Author:

LK is a technology writer for Tech Journey with background of system and network administrator. He has be documenting his experiences in digital and technology world for over 15 years.Connect with LK through Tech Journey on Facebook, Twitter or Google+.