HTML::Templateに携帯用Google Analyticsを導入する

Perl のテンプレートエンジン、HTML::Templateに携帯用GoogleAnalyticsのコードを導入してみる

例としてHTML::Template を使っていて個人的にMovableTypeとも相性がいいと思うUTF対応のpgdmailformの場合で試してみる

実際に手を加えたpgdmailformのダウンロードとオリジナルの比較

GA mobile版とオリジナルの比較

手順はこんな感じ

  1. GoogleAnalyticsのperl向け携帯用コードを確認する
  2. pgdmailformの必要な部分に修正を加える
    1. ga.plを設置
    2. トラッキングコード生成スニペットを組み込む
    3. 入力画面、確認画面、送信完了画面それぞれにテンプレートタグを定義
  3. 実際のテンプレートを修正

1.GoogleAnalyticsのperl向け携帯用コードを確認する

Google Analyticsの携帯用トラッキングコードは

  • トラッキングコードの生成ルーチン
  • <IMG>タグ出力用コード
  • 1x1ピクセルの透過画像生成スクリプト

の3種類のスニペットが必要であらかじめGoogle Analyticsのトラッキングコードのページから確認してください。

プロファイルの設定からステータスの確認

トラッキングコードの追加からアドバンスタブを選択

携帯向けのサイトからPerlを選択

するとこんな画面
Google Analytics mobile tracking snippets

2.pgdmailformの必要な部分に修正を加える

実際にGoogle Analyticsの携帯用トラッキングコードスニペットをHTML::Templateを使っているpgdmailformに組み込む。

画像生成スクリプト、ga.plをGoogle Analyticsのトラッキングコードの画面からダウンロードしてサーバ内のルートディレクトリなどのアクセス可能な場所に置いておく。

テンプレートエンジンのHTML::Templateなのでテンプレート自体にPerlは直接書けない(と、思う)ので、Google Analyticsの処理をライブラリ化して組み込む

アカウントIDを自分のサイトに変更したGoogle Analyticsのトラッキングコードを生成するスニペットをga_mobile.cgiとして、pdgmailform/libに置く

pgdmailform本体のpgdmailform.cgiを開いて
ライブラリとして68行目付近に以下の1行を追加する

require 'ga_mobile.cgi';

さらに、pgdmailform.cgi内で各画面ごとのトラッキング用画像のテンプレートタグを定義する
入力フォームテンプレートの124行目付近の$tmpl->param();内に

'ga_mobile' => '<img src="/' . GAMobile::google_analytics_get_image_url() . '" />',

入力内容テンプレートの346行目
$tmpl->param('ga_mobile' => '<img src="/' . GAMobile::google_analytics_get_image_url() . '" />');

送信完了テンプレート417行目
$tmpl->param('ga_mobile' => '<img src="/' . GAMobile::google_analytics_get_image_url() . '" />');

3.実際のテンプレートを修正

入力フォーム、内容の確認、送信完了の各テンプレートにトラッキング用画像のテンプレートタグを挿入

<!-- TMPL_VAR NAME=ga_mobile -->

最後に、とても便利でUTF-8対応のpgdmailformをパブリックドメインで公開してくれているPGD WORKSさんに感謝。
(年末年始の忙しい時期に念のため連絡とってみたら積極的に公開してくれって言ってくれてありがとうございます。)

ウェブシステム制作/カスタマイズオフィス | PGD WORKS
GA mobile版とオリジナルの比較

HTML::Template - CGI スクリプトから HTML テンプレートを使うための Perl モジュール
HTML::Template メソッドリファレンス - ORANGE FACTORY