Purpose of this document

Optimizing your site with Mobify Performance Suite doesn't require any changes to your site, but in order to initialize performance data collection you'll need to add the Mobify tag to your site's source code. The purpose of this document is to explain how to install the Mobify tag on a variety of different document types.

Prerequisites

  • Text Editor – if your site uses a back end framework, like PHP, Rails, or Django, you'll need a text editor to make changes to the templates. If you use a CMS like Wordpress or Drupal, you may be able to get away with making template changes in your site's administration instead.

  • Server Access – If you're not using a CMS, it's likely you'll need to make changes to templates directly on the server. You might be able to access these templates with an FTP program, but larger sites with multiple contributors may require you to make changes within your site's version control. If you're not sure how to proceed, talk to your site's administrator for help.

1) Copy the Mobify tag to your clipboard

A unique Mobify tag is generated for each project, after entering your site's URL you'll see the tag, click the Copy Mobify Tag button to copy the tag to your system clipboard (desktop only):

Get tag

2) Install the Mobify tag

This step will depend on your site's back end. We have guides for Wordpress and Drupal, but if you're using another CMS or a back end framework like Django or Rails you may need to consult your documentation to find out where your templates are located.

The goal is to find any HTML templates that control the header of your site. These may be multiple templates or it might be a single template.

How to install in static HTML templates

In at least one of your site's templates you ought to see see a <head> tag:

HTML document without Mobify tag

When you've located this tag, place the Mobify tag immediately after it in any template where it occurs:

HTML document with properly installed Mobify tag

Don't worry if <head> has more attributes, simply insert a new line after the closing > character for that tag, wherever you might find it:

HTML document with properly installed Mobify tag

How to install in PHP templates

PHP templates will likely mix PHP code in with HTML, but aside from possibly more code to sift through, the process of placing the Mobify tag ought to be the same as with HTML templates.

PHP template without Mobify tag

Find any occurrences of the <head> tag in your site's templates and add the Mobify tag immediately after:

PHP template with properly installed Mobify tag

How to install in Django/Rails/other templates

With a typical back end framework you are likely to see template tags beyond just HTML. For example, a Django project's header template might look something like this:

Django template without Mobify tag

In most cases you should be able to find the occurrence of <head> and place the Mobify tag immediately after:

Django template with properly installed Mobify tag

How to install in Drupal templates

Ensure html.tpl.php exists in your theme

Starting from the root of the Drupal directory on your server, locate the following path:

{DrupalRoot}/themes/{yourSiteTheme}/templates

{yourSiteTheme} is a named directory that includes your site's theme; if you're not sure which theme your site uses, log in to the Drupal admin and click the Appearance tab - the current theme's name will display (default theme) after its name.

Check to see if a file called _html.tpl.php exists in this path. If so, skip to the next step.

If the file isn't there, you'll need to make a copy of the master file from this directory:

{DrupalRoot}/modules/system

How you accomplish this depends on how you access your site. If you're using an FTP program, download a copy of this file to your local computer, navigate to the second path and upload it there. If you're instead working on a local copy of your site that's checked into a version control system, use Windows Explorer or your Mac's Finder to make a copy of the file and drag it to the second path.

html.tpl.php

Once you've done it correctly, the full path to this file will be:

{DrupalRoot}/themes/{yourSiteTheme}/templates/html.tpl.php

Load this file in your favourite text editor. You'll likely need to scroll down to locate the <head> tag within the template.

html.tpl.php without the Mobify tag

Find it, then paste the Mobify tag immediately afterwards. Chances are <head> will have more attributes as shown in the example below, but don't worry about those. Simply insert a new line after the closing > character for that tag, wherever you might find it, and drop the Mobify tag in that space.

html.tpl.php with a properly installed Mobify tag

Save your changes, and if necessary publish this file to your server.

It's necessary to clear your Drupal cache at this point to ensure the updated template is applied to your site. Log in to the Drupal admin and click the Configuration tab, then click the Performance option. Near the top you'll see a button labelled Clear all caches - click this, then refresh your site.

Clear cache button

Installing in Wordpress templates

Log into Wordpress, and click on the Appearance item in the sidebar to expand it, then click the Editor item.

Wordpress appearance menu

In the template menu on the right, find the template that contains the <head> tag. In most cases, this will be header.php, but heavily-customized themes may place it elsewhere (and possibly in multiple templates).

Wordpress template

Locate the <head> tag within the template and paste the Mobify tag immediately afterwards. Don't worry if <head> has more attributes than the example below, simply insert a new line after the closing > character for that tag, wherever you might find it.

Inserted Mobify tag

White space doesn't matter, so if it helps readability you can insert blank lines above and below the tag to help call it out. This is another example of valid tag placement:

Inserted Mobify tag

If you don't see the Update File button, you may need to adjust permissions on the template you're trying to edit.

Upload File button

See the Wordpress Codex for more on file permissions if this applies to you.

Permissions Error

3) Checking Tag Placement

Once the tag is in place, save the template. Navigate to the URL you're attempting to validate in your browser, view source and search for MOBIFY. You should see the Mobify tag where you placed it in the rendered template, immediately after the <head> tag.

If you don't, your CMS or framework may require cache flushing or page rebuilding at this point. Consult your documentation for instructions.

Verify Tag

After following these instructions, head back to your in-progress MPS setup and click the Yes, it's installed button to continue. You should see a success message. Congratulations, you're ready to publish your optimizations! (Note that installing the tag does not cause your optimizations to go live immediately, you'll still need to continue set up and manually publish through cloud.mobify.com.)

Troubleshooting

If you come across an error during tag validation, there are a few things you can try:

Make sure the tag is there

Check whether the Mobify tag is actually in the template used by the page you're trying to verify. Your CMS or back end framework might use multiple templates, so it's possible the URL you're validating doesn't actually render with the template you added the Mobify tag in. The easiest way to verify is by viewing source of the URL you're attempting to validate and search for MOBIFY. You should see the Mobify tag immediately after the <head> tag.

Ensure the Mobify tag comes directly after the <head> tag

Check your rendered HTML to make sure the Mobify tag comes directly after the <head> tag. That might require moving existing <meta>, <script> and <style> tags down a bit in your source order.

Flush any caches

If you have caching enabled on your server, you may not see the tag show up where expected due to an outdated cache. If this occurs, consult your CMS or framework documentation for instructions on flushing or deleting the cache.

Flushing the Wordpress Cache

If you have a caching plugin like WP Super Cache, you may not see the tag show up where expected. If this occurs you may need to flush your cache.

Last Edited