Tag Archive for: mobile

How to Install Google Analytics on Your WordPress AMP Content

/0 Comments/in , /by

In the last post we talked about how to get AMP working in WordPress and how to get it optimized for the Accelerated Mobile Pages search results. Today we’re going to talk about how to get Google Analytics working on the AMP content. We’re huge GA fans, and if we’re not tracking the traffic for our site, we really wonder why we’re doing it in the first place.

Google recommends that you create a new property for your AMP pages. The analytics library for AMP doesn’t have all the capabilities of a full-scale GA snippet, so there would be a bit of apples and oranges if you put that traffic into your main account. Also, there’s not going to be much traffic shuttling between the two versions of your site. There will be no traffic going from the real site to the AMP templates, and any traffic coming off the /amp pages will have only one source: Google mobile search.

Just like the logo we did in the previous blog post, you’re going to insert the Google Analytics onto your page using hooks dropped into functions.php. The AMP guidelines only allow pre-vetted one-size fits all javascript, which means you can’t just drop the normal GA snippet into your head. You will add Google Analytics using the “amp-analytics” tag, which you customize to your account using JSON.

Which is to say, copy and paste the code below and replace the “UA-xxxxxxx” with the Google Analytics ID for your new property, and that should do the trick.

//////////////adding analytics to AMP///////////

add_action( 'amp_post_template_head', 'xyz_amp_add_analytics_library' );
add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );
function xyz_amp_add_analytics_library( $amp_template ) {
$post_id = $amp_template->get( 'post_id' );
?>
<script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<?php
}
function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    // see https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md for more on amp-analytics
    ?>
 <amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-xxxxxxx"
  },
  "triggers": {
    "trackPageview": { 
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>
    <?php
}
/////////////end adding AMP analytics////////////////

I haven’t been seeing the GA AMP tag showing up in the Tag Assistant extension, so you will need to look at this property through the real-time viewer to see if it’s actually tracking.

How to Implement and Optimize AMP in WordPress

/1 Comment/in , /by

Do you have Accelerated Mobile Pages working? Unless you’re a major news outlet like The Guardian, you probably don’t. In this post, we’ll talk about what AMP is and what it’s not, how it will be hugely important for SEO (or totally irrelevent), and lastly how to get it working on your own WordPress site. And in the next post we’ll cover how to install the analytics, which will answer the question which is hovering sword of Damocles-like above this whole project: Is AMP worth the trouble? Or is it another crazy scheme like Rel Author which won’t catch on?

Accelerated Mobile Pages: Possibly a Big Deal

Starting on Wednesay, February 24th, two days from the writing of this blog post, Google will start presenting AMP in its mobile search results.

First, let’s remove the two major misconceptions that the name “Accelerated Mobile Pages” has already given you and everyone else. AMP is absolutely not a way to speed up your site’s load time. In fact, AMP is a tool for bypassing your site’s speed entirely. Second, AMP is not a way to deliver mobile content to your users and it’s not the newest successor to responsive design.

Accelerated Mobile Pages allow Google to present extremely fast content through mobile search. If you’re not on a mobile device, Google won’t show you AMP content. And to ensure the fastest possible loads, Google will cut you and your second-rate hosting out of the equation entirely by caching your AMP content on Google’s own servers.

So basically, you’re jumping through hoops to give Google content to present to their users, through their hosting, using their stringent quality standards, and without the design and features that you’ve worked so hard to implement on your site.

Take a look at this very post in AMP format, presuming you’re not doing so already. All you have to do is type “/amp” at the end of the URL and go:
https://tastyplacement.com/how-to-implement-amp-and-google-analytics-in-wordpress/amp
Are you back? Doesn’t look like much is going on, does it? It’s supposed to be simple and cookie-cutter because everything here is about speed.

What Does AMP Mean for SEO?

If your site doesn’t pull any search traffic for the terms which provoke AMP search results, then this won’t amount to anything. If Google displays AMP results for your keywords, then it means choice rankings right at the top of the page. If there’s anything which is more of a no-brainer for SEO than automatic #1 rankings for a sizeable chunk of your organic traffic, please mention that in the comments.

At the moment, the AMP results demo only seems to show for very current news topics. You can expect that to expand as more publishers push into Accelerated Mobile Pages. Try opening this link in a mobile device to see it in action.
AMPresultsDemo

Getting AMP Working

The first step is to get the official AMP plugin for WordPress installed on your site. The team working on this piled on a bunch of updates under the wire before the big day. Just last month it gave some pretty raw results, with broken code displaying visibly on most pages.

Currently, the plugin only works on posts. It will not do regular-old pages or archive pages or anything like that. And it doesn’t have to. Remember, the mission for AMP is pretty narrow right now. It’s all about delivering content fast for mobile searchers and they won’t need any of that stuff.

The plugin is going to do all the heavy lifting of making the meta-tag markup work and having most of the content validate. You just need to make it look good and fix anything overly ugly.

Sprucing It Up

Out of the box, the AMP template for WordPress is pretty vanilla, but that’s kinda the point. You will want to customize it with your logo. The developers of the plugin want you to make your changes using hooks. This is the WordPress way and in the long term it will be the most future-proof strategy.

The AMP template will only display a 32×32 image. You may already have a favicon file of this size, but if not, shrink down your logo and then upload it to the WordPress media library.

To add that image, drop this function at the bottom of your theme’s functions.php file:

///////////////adding the site icon to AMP///////////
add_filter( 'amp_post_template_data', 'xyz_amp_set_site_icon_url' );

function xyz_amp_set_site_icon_url( $data ) {
// Ideally a 32x32 image!!!!!!!!!!!!!!!!!
$data[ 'site_icon_url' ] = get_site_url() . '/wp-content/uploads/YOURLOGONAMEHERE.jpg';
return $data;
}

If you want to make more sweeping changes, you will have to put together a custom template, but that’s probably not worth the effort until you know how much traffic you’re getting through the AMP initiative.

Troubleshooting AMP in WordPress

Most likely there’s going to be some problems. The AMP plugin broke our front page because we had our site name saved with a couple of capital letters. I found that the Digg Digg plugin broke AMP. Our caching plugin also caused strange results. Like usual, plugin conflicts will be the source of most of your problems.

To check to see if your page validates correctly, just add “#development=1” to the end of your AMP URL in Chrome. Then right-click, inspect element, and click on the “console” tab. If you haven’t made any mistakes, then you’ll get the all-clear validation:
AMPvalidationconsole
If you don’t, then you have more work to do.

Once Google has crawled the site, they’ll let you know if any of the pages failed to validate in Search Console.
AMP search console warning

Maximizing Your AMP Traffic

You will notice that the AMP template doesn’t have a menu or footers or sidebars, or all the bells and whistles we expect from WordPress. All this hypothetical traffic from Google mobile search won’t mean anything if you can’t keep visitors on your site. So try adding this code to your functions.php, so any users who get to the bottom of your content won’t be left hanging:

////A little message for the end of AMP pages/////
add_action( 'amp_post_template_footer', 'callToActionAmp' );
function callToActionAmp() {
	$sitelocation = get_site_url();
	?><div class="content"><h3>Get more great infotainment <a href="<?php echo $sitelocation; ?>">on our main site</a>!</h3></div><?php
	return;
	}

And that should more or less have you set up for Accelerated Mobile Pages. Let us know if you get any meaningful traffic from it!

In the next post we’ll talk about how to get Google Analytics working on your AMP pages.

How to Make a Mobile Site Click to Call Link

/34 Comments/in /by

A “click to call” button or link on a mobile or smartphone website can mean the difference between getting a customer to call or losing them forever. Converting customers with mobile sites is a different discipline from converting customers on desktop websites: mobile website visitors are unlikely to read long sales copy, are similarly unlikely to send an email, and are certainly not going to fill out a lengthy web form. In the mobile environment, a phone call is your best route to conversion–after all, your visitors have the phone in their hand!

Coding the Click to Call Link for Mobile Phones (updated for 2015)

To create a click to call link, use the following code:

<a href="tel:8005551212">800-555-1212</a>

“Selling” the Click

Now, let’s improve our click to call link. After all, all we’ve done with the above link is make the phone number clickable; will users know that the phone number is a click to call link? We can “sell” the click by adding a call to action to our link:

<a href="tel:8005551212">Click HERE to Call: 800-555-1212</a>

That’s an improvement, it serves to highlight the link and directs users with a call to action.

Pro Tip: Visually Improving the Click to Call Button

To take our click to call link even further, we can add an arrow to visually guide users to the desired action–and maybe even add a second call to action. You can see this technique in action on the following mobile site:

Click to Call in Action!

Pro Tip: Advanced Analytics Tracking for Mobile Calls

We’ve written a tutorial on how to track the phone calls through a click to call link with Google Tag Manager and Google Analytics.