GA4 用 JS ファンクションタグ for Movable Type
Movable Type 用でアナリティクス4 のスニペットを出力するファンクションタグです。
条件
Google Analytics アカウントを持っていて、アナリティクス4への移行が完了している
準備
Google Analytics のアナリティクス
ga('create', 'UA-12345-6', 'example.com');
提供するタグ
<MTGAGlobalSnippet>
オプションのモディファイアはありません。
使用箇所
<head></head>
のすぐ下に当テンプレートタグ記述します。
Repository
以下、git clone して ga4 ブランチに切り替えて使用してください。
または、以下のリンクより
https://github.com/markdiary/mt-plugin-GAGlobalSnippet/archive/ga4.zip
インストール
展開後の「GAGlobalSnippet」を Movable Type の pluguins ディレクトリにアップロードします。
システムのプラグイン一覧に、GoogleAnalytics Global Snippet が表示されます。
設定
ブログ単位の設定項目があります。
アナリティクスのプロファイルID
G-XXXXXXX 形式のIDをセットします。また、profileモディファイアによりこの設定を上書き(=置き換え)できます。
その他のプロパティを追加したい場合は、プラグイン設定の「スニペットのカスタマイズ」のテキストエリアに gtag('config', 'UA-123456-1');
のように記述します。
JavaScript コードの記載が適切でないと期待する動作になりませんのでご注意ください。
注意点
Google Analytics 4 がリリース後間もないため、仕様変更が発生する可能性があります。
機能自体が Google Analytics の仕様に依存するため、仕様変更による対応が即座におこなえないことをご理解ください。
当方では、カスタマイズしたコードのサポートをいたしません。
個人サイトでの利用を推奨します。
License
MIT License
AMP向け個別記事テンプレートを作ってみる
AMP(Accelerated Mobile Pages) は、モバイル環境で高速表示を実現するプロジェクトです。これに対応する Movable Type用のテンプレートを作ってみることにしました。
AMPに関する詳細は以下にあります。
Movable Type で対応させたといった記事です。
- Google AMP HTML に対応してみた件 - LIQUID BLOG
- AMP (Accelerated Mobile Pages) HTML を出力するようにしてみたけど面倒くさかった話 | WWW WATCH
基本としては、個別アーカイブにテンプレート組んで、AMPの決まりごとに沿うように出力の調整をかけるというものです。
その際に、アーカイブマッピングでAMP用のパーマリンク設定となるよう、設定を行い、記事アーカイブのメインと同時にAMP用アーカイブテンプレートが作成されるという形です。
個人的には、出力については、ダイナミックパブリッシングにしておくことで、再構築などに負担がかからないのではないかと思ってます(キャッシュが効いてるという前提ならば)。
以上踏まえて、サンプルというか、実際ブログで使ってるものベースのテンプレートを以下においてあります。
(Google Analytics や アドセンスなど付随するモジュール群は入ってません)
あと、定期的に変更したり元が変更したら反映するようにしますのであくまでもサンプルとしてです。mt:Ignoreのコメントは説明のためのもので、実際のテンプレートには入れていません。
以下、作った時点の方針のようなものです。
- 編集画面で管理するものとして、なるべく手間のいらないように、include テンプレートしない作りにした
- 禁止属性等は正規表現にて、置換・削除し、マッチパターン、リプレイスメントは変数代入にした
- ダイナミック動作想定で極力DBアクセスが少ないよう最低限なテンプレートタグで組んだ
- CSS や JSON は出力時に、改行・空白を詰めるようにした(編集画面で見やすく、サイズ縮小出力できる、よくある手法です)。
AccessRankingGA プラグインをOAuth 2.0 対応
Google APIs で、ClientLoginによる認証のサポートを打ち切ったために、AccessRankingGA が使えなくなっているようでしたので、OAuth 2.0 で認証するようにコードを修正しました。
個人使用レベルですが、コード修正の一助となればとおもい、情報公開しました。
OAuth 認証にあたっては、PerlでGoogle AnalyticsへアクセスするならNet::Google::Analyticsが便利 - ゆーすけべー日記 で紹介されている、Net::Google::Analytics というモジュールを採用するとしました。
あらかじめ CPAN で Net::Google::Analytics をインストールしておきます。
私の場合は、サーバーのほうでは Net::Google::Analytics をインストールすることができませんでした。Github のリポジトリから(http://github.com/nwellnhof/Net-Google-Analytics)DLして、lib をプラグインの extlib フォルダにいれて使用しています。 Net::Google::Analyticsは依存モジュールとして、Class::XSAccessor (< 1.05) が必要ですので、手動によるインストールの場合は注意してください。
変更をおこなう前にブログのバックアップ(サイト全体のバックアップとテーマ・テンプレート等)をとっておけば、不測の事態にも安心です。 このプラグイン修正および、元プラグインに起因する損失については当方は責任を負わないということとさせていただきます。
動作の確認は Movable Type 6.1.1 でおこないました。
1. Google APIs Console でプロジェクトを作成
まず、プラグイン使用にあたり、Google APIs から取得する項目を示します。
- クライアントID
- クライアントシークレット
- リフレッシュトークン
Movable Type 6系で、GoogleAnalytics プラグインのGoogleへの認証を済ませてあり、ダッシュボードにサイト情報が表示できている場合は、以前に登録したプロジェクトIDでそのまま使うことができます。
まだ設定されてないか、v5.x 系のときは、Movable Type 公式の以下のドキュメントにならって作成すればいいです。
スクリーンショットが旧版のUIのほうで撮られているのですが、基本的にはフォームに入力する項目は変わりません。 わかりにくいときは、以下のページなどを参考にするといいかと思います。
作成すると、左メニューのAPIと認証 >認証情報 で作成した一覧がみられます。
その中から、クライアントID 、クライアント シークレットをメモします(実際には付箋系のアプリとかに貼付け等)。
この画面からは、リフレッシュトークンは得られないので、必要なパラメーターをつけて、 https://accounts.google.com/o/oauth2/auth にアクセスしにいくのですが、 Net::Google::Analytics では、リフレッシュトークン取得のためのツールもパッケージされているのでそれを利用します。
具体的には、ターミナルで以下のようなコードを実行するなどです。
(サーバー上にこのツールを置かなくてもローカルからの実行で適切なリフレッシュトークンを得ることができます。サーバーから実行したとき、ターミナルのプロンプトの入力でもたついていると、プロセスkillされたりするので)
$ cd /PATH/TO/cgi-bin $ ./get_acces_token.pl
実行後のターミナルに表示されるURLの後尾に以下を追加した状態でアクセスします。
&approval_prompt=force&access_type=offline
参考:
成功すると、承認のウィンドウがでて、こちらが承認したあと、リダイレクトURLのところで設定した URLに 遷移します。そのURL の code= 以下の部分をコピーして、ターミナルの先のツールのプロンプトに貼付けして enter します。
注意点ですが、 #のような記号はURLエンコード(%23)しておかないとエラーになるようです。
ツールで返ってきた、 refresh token をメモします。
うまくいかない場合は、以下を参考にするといいでしょう。
設定の為に必要な情報を得るのは以上です。
2. プラグインを OAuth 移行版に差し替える
OAuth 2.0 対応のブランチを用意しておきました。
リポジトリをプライベートに変更いたしました。スニペットは閲覧できるようにしてあります。
- https://bitbucket.org/markdiarycom/mt-plugin-accessrankingga/branch/oauth20 | mt-plugin-AccessRankingGA / oauth20 -- Bitbucket
( ダウンロードの場合、https://bitbucket.org/markdiarycom/mt-plugin-accessrankingga/downloads の Branches タブの oauth20 です)
フォルダごとそのまま以前のものと置き換えでよいかとおもいます。今のところ、静的なファイルには手を付けていません。基本として必要な箇所のみ変更したものです。
プラグインの設定(ブログ単位)のページにいき、先ほど入手した各項目を入力していきます。
入力例を示します。以上です。
あとは、 <$MTAccessRankingGA$>
ファンクションタグを設置したテンプレートをプレビューするなどします。
うまく表示できていない場合は
- Net::Google::Analytics モジュールのパスはあっているか
- 設定した ID等に入力に間違いがないか
あたりを確認してみてください。
出力結果が以前と相違ないようであれば、今まで通りのテンプレートと cron設定のまま使うことが出来ます。
制限事項としまして、現在のところ、トップページを除外して出力させるオプションに対応していません。
当方がリファラスパム対策で、サイトのトップページをレポートから除外しているためです。動作を検証できる環境が整っていないので対応を見送っています。
除外フィルターの機能をサポートしました。使い方は、設定のトップページ除外のチェックボックスにチェック、その下の除外パスリストにカンマ区切りか改行で記述すればいいかとおもいます。
Query Explorer(https://ga-dev-tools.appspot.com/query-explorer/) を試してチェックしていますが、おかしな結果がでているようならば、ご連絡いただけるとありがたいです。
参考までに、修正にあたってのメモです。
追記
使用上での注意点
Google アカウント設定の「アカウントに接続されているアプリ」から、許可されている、Google Analyticsを 「アクセス権を取り消す」により、アクセス権剥奪された場合、もう一度、リフレッシュトークン発行の操作をおこなって、設定にてアクセストークンを更新する必要があります。
2015.06.21
インデックス除外等フィルター機能をサポートしました。
追記:2
2015/08/05 リポジトリをプライベートに変更しました。ご了承ください。
2015/10/02 文中リンクのリンク切れを修正しました。
Movable Type カスタムフィールド編集ページの項目と値をリストアップするブックマークレット
Movable Typeのカスタムフィールド編集の画面上で現在入力されている値をリストアップするブックマークレットです。
カスタムフィールドの現在の内容を管理ページで一覧するようなプラグインは探すとあるようなのですが、リストのメモをとったりり、リストをブログ記事に掲載したりするのに利用できるようなプラグインがみつからなかったので作成してみました。
実行した例です。定義リストとして生成し、画面下部に以下のように表示します。
(現在表示されているフィールドの value を取得するようにしていますので、各フィールドを書き換えた後は、保存されている値ではなく、その値が表示されます)
システムオブジェクト 記事 名前 コード埋め込み 説明 記事内に任意のソースコードを埋め込む 種類 テキスト(複数行) オプション なし 必須 必須でない 規定値 既定値 ベースネーム embedcode テンプレートタグ embedcode
コードの中身は以下となります。
document.body
に 追加なので、体裁はよくないですが、一応使えるレベルということで。
// for Movable Type 6.x // Movable Type license as MIT // Checked ver. 6.0.6 // use /path/to/mt.cgi?__mode=view&_type=field (function($){ // get custom field value $('body#edit_field').each(function () { var f_objType = { 'システムオブジェクト': $('#obj_type').parent('div').text().replace(/[\s\r\n]+/g, '') }; var f_name = { '名前': $('#name').val() }; var f_desc = { '説明': $('#description').val() }; var f_type = { '種類': $('#type-label').parent().next().text().replace(/[\s\r\n]+/g, '') }; var f_option = { 'オプション': $('#options').val() || 'なし' }; var f_require = { '必須': $('#required').attr('checked') === 'checked' ? '必須' : '必須でない' }; var f_default = { '規定値': $('#default-field').text().replace(/[\s\r\n]+/g, '') }; var f_basename = { 'ベースネーム': $('span.basename-text').text() }; var f_tmplTag = { 'テンプレートタグ': $('#tag').val() }; var result = []; result.push(f_objType); result.push(f_name); result.push(f_desc); result.push(f_type); result.push(f_option); result.push(f_require); result.push(f_default); result.push(f_basename); result.push(f_tmplTag); // out $('body').append('<div class="rslt"/>'); $.each(result, function () { for (var key in this) { for (var i = 0; i < result.length; i++) { var dlist = $('<dl>'); $(dlist).append('<dt>' + key + '</dt>\n<dd>' + this[key] + '</dd>\n'); } } $('div.rslt').append(dlist); }); console.log(result); }); })(jQuery);
リポジトリとして、Hatena::let にあります。
W3C Validation Link プラグイン
記事編集ページに The W3C Markup Validation Service に作成されたエントリーを検証するボタンを追加するプラグインです。
Screen Shot
仕様と注意点
記事編集ページの Validate ボタンを押す(クリック又はタップ)と、W3C Markup Validation Service へURIつきリンクで遷移します。
localhost の場合には、Direct Input へのリンクのみになります(フォームに値は渡りません)。
公開済パーマリンクが存在するものだけを対象とします。未公開/下書きには表示されません。
ボタン(リンク)の内容を変えたいときは、MakeLink.pm ファイルをカスタマイズしますが、オリジナルのほうのテンプレートソースに変更を加えないように注意してください。
ブラウザの右クリックメニュー等からの移動は、エントリーのパーマリンクとなっています(クリックしたときのみの動作)。
※プラグインかalt-tmplで「表示」と「共有」ボタン付近に変更を加えている場合に動作しないかもしれません。
動作の確認は、Movable Type 5.2.x、Movable Type 6.0.x にておこなったものです。
ダウンロード
インストール
展開したフォルダを plugins ディレクトリにアップロードします。
ライセンス
The MIT License (MIT)
Google Analytics Global Snippet plugin
Movable Type 用でアナリティクスのグローバルスニペットを出力するファンクションタグです。
条件
Google Analytics アカウントを持っていて、グローバルスニペットの利用が可能である、ということ
準備
Google Analytics のアナリティクス設定 - トラッキング情報 - トラッキングコードからコードから、以下の部分(強調表示個所)を控えます。
ga('create', 'UA-12345-6', 'example.com');
提供するタグ
<MTGAGlobalSnippet>
オプションとして以下のモディファイアを用意しておきました。
- profile="foo"
- domain="foo"
- custom="foo"
使用箇所
<head></head>
内、 <body>
付近、</body>
上などトラッキングコードを設置したいテンプレートに記述します。
記事ページ内等、mteval
を使用して出力するような場所はあまりお勧めしません。
ダウンロード
repository
インストール
展開後の「GAGlobalSnippet」を Movable Type の pluguins ディレクトリにアップロードします。
システムのプラグイン一覧に、GoogleAnalytics Global Snippet が表示されます。
設定
ブログ単位の設定項目があります。
アナリティクスのプロファイルID
UA-XXXXX-Y
形式のIDをセットします。また、profileモディファイアによりこの設定を上書き(=置き換え)できます。なお、このフィールドを空にすると、ga('create','UA-XXXXX-Y,'example.com');
の部分を出力しなくなります。
カスタマイズしたオプションを追加したい場合、このフィールドと、ドメインを空にしたままで、カスタマイズしたものをそのまま、スニペットのカスタマイズのフィールドに記述することができます。
Google Analytics の設定に詳しくない場合は、このプロファイルIDとドメインのフィールドのみセットすればよいです。
ドメイン
取得したトラッキングコードで、 ga('create', 'UA-XXXXX-Y, 'example.com');
の example.com
に該当します。初期値として、'auto'
を入れています。ここを変更しない場合は、ga('create', 'UA-XXXXX-Y, 'auto');
といった出力です。
スニペットのカスタマイズ
上級者むけの設定で、ga('create'...
の部分からそっくりカスタマイズできます。ここを利用するときは、アナリティクスのプロファイルIDを空欄にして、このフィールドにカスタマイズしたスニッペットを全て記述すればよいでしょう。
スニッペットのより詳しいリファレンスは、公式の以下のページを参照します。
各モディファイアについて
通常は、<MTGAGlobalSnippet>
タグのみで、設定した項目を反映して出力されますので、このモディファイアはオプションとしてのものです。
モディファイアを書き加えると以下のようになります。
- profile="foo"
-
プロファイルIDを指定します。
主にプラグイン設定の書き換えをテンプレートタグで行ないたいような時に使います。
- domain="foo"
-
ドメイン部分を指定します。
テンプレートごとにドメインを変えたい時などに指定します。
- custom="foo"
-
カスタムスニペットに追加できます。
出力も設定のものに追加される形になります。
注意点
このプラグインでは、各項目の組み合わせによるコードの妥当性の検証をプラグイン内部で行なっていません(*プラグイン設定のフィールドに記述した基本的設定での出力については、DIMインスペクタ等で確認をしています)。
カスタマイズしたコードの組み合わせかたによっては、意図した動作にならない場合もありえますので、その点は自己の責任でお願いします。
当方では、カスタマイズしたコードでの動作保証はいたしません。
機能自体が Google Analytics の仕様に依存するため、仕様変更による対応が即座におこなえないことをご理解ください。
License
MIT License (Movable Type 6.x の場合。 MTOS旧版についてはGPLv2に従うとします)
メモ:Movable Type:このプラグインは、 Mvable Type 6向けにアップグレードされていません。の直しかた
Movable Type で古いプラグインを使用していると、表題のような警告がプラグインリストに出ていることがあります
そのままでも動作するのがあったりしますが、今後のことも考えると、似た機能の別のプラグインを探すか、修正するとかいう選択を迫られることとおもいます。
今回は、この警告の対処について、メモとして書いてみますが、あくまでも個人的な使用前提での話ということですので、本番環境で複数ユーザ運営システムの環境は考慮していません。
名指しで申し訳ないのですが、伏せた状態で説明しても分かりにくいので、古めのプラグインの例として TBPingLinkLookup を選ばせてもらいました。
参照:
メッセージに書かれているとおりなのですが、変更の実際をやってみます。
このプラグインは、.pl に書かれているタイプのものですので、tb-link-lookup.pl ファイルを編集することにします。(Movable Type の推奨するYAML形のプラグインに直す手もあるのですが雛形とか用意できてないと、手間だったりするので、今回は直接修正する形をとります)
MT->register_junk_filter
はコメントにします。
# MT->register_junk_filter({ # name => $PluginName, # plugin => $plugin, # code => sub { $plugin->handler(.@_) }, #});
my $plugin =
という箇所に、registry(junk_filters)になおします。
registry => { junk_filters => { $PluginName => { label => $PluginName, code => \&handler, }, }, },
以上が追加するコードになるかと(インデントは適当なので、元のコードにあわせるほうが視覚的はいいです)。 プラグイン名は元のMT::register_junkfilter のほうが、プラグイン名($PluginNameにて登録ずみ)を使用しているので、そのまま利用します。
label には、このプラグイン名、 code にハンドラを指定。このプラグインだと、 handlerというサブルーチンがそれに該当。
このコードの追加場所ですが、プラグインを登録する、my $plugin の最後(});の前)に追加します。
以上で、ファイルを反映させ、プラグインリストを表示させると、警告が消えて、ジャンクフィルタとしてフィルタ名が表示されるはずです。
Movable Type 記事エディタ上ではてなHTTP記法(ブックマークページつき)を展開するボタン
Custum Editor Button 2 用エクステンションで、MTの記事編集のところに、はてなHTTP記法で書かれた部分を展開してHTMLにします。
はてな記法は、とっつきにくさはあるものの、MTのファンクションタグのように一度おぼえてしまうと、記事作成等に重宝します。
しかしながら、この記法は「はてな」外でつかうと、それに対応した環境を用意する必要がでてきます。例えばグローバルモディファイア等で記法を変換するものを用意したとしても、常に出力する箇所にグローバルモディファイアをあてておかないと、記法のまま出力されてしまうということになります。
そこで、この記法で書かれた部分を編集画面上から変換できるようにするボタンを作ることにしました。
このボタンは、HTTP記法で書かれた部分をHTMLへデコードします。これにより、記事データをはてな記法に依存せずに使い回ししたいような場面でも対応可能かとおもいます。
ダウンロード
置き場所
インストール
展開後のフォルダを所定の場所にアップロードします。
詳細は、READMEファイルに書かれています。
Custom Editor Button 2 も用意しておく必要があります。
当プラグインのライセンスは CEB2がGPLv2を採用しているため、それに従います。
以下に実際に使用した動画を用意しておきました。
TODOコメント向けのテンプレートタグ
Movable Type プラグイン 「TODO」について
簡単な説明
おもにTODOコメントの出力に特化させたテンプレートタグです。
テンプレートタグ内容を、コメントとして出力して、かつ、コメント先頭に"TODO: " の文字を含めます(TODOコメント)。
一行コメント向けにファンクションタグを、ブロックタグは、複数行コメント向けとして用意しています。
出力のときに、言語にあわせたコメント書式が使えるように、type 属性を設けました(後述)。
提供されるタグ
- ファンクションタグ
<$MTTodoNote$>
- ブロックタグ
<MTTodo>
使用例
ファンクションタグの場合
<$mt:TODONote note="xxxのyyyをxxxxする"$>
出力
<!-- TODO: xxxのyyyをxxxxする -->
ブロックタグの場合
<mt:TODO type="#"> xxxのyyyをxxxxする コメント1 コメント2 ブログID <$mt:BlogID$> </mt:TODO>
出力
# TODO: xxxのyyyをxxxxする # コメント1 # コメント2 # ブログID 2 #
使用可能な属性について
note ファンクションタグで出力したい内容を書きます。 例: note="内容" type ファンクションタグ、ブロックタグ共通で使えます。 例: type="js" 使用可能な値 html HTMLのコメント(<!-- -->)として出力します。type属性省略のときはデフォルトとしてこのtypeとなります。 js JavaScript 用コメントです。 ファンクションタグで使うと // TODO: という形です。 ブロックタグでは /* から */ で囲みます。 javascript js と同じです。 # コメントとして # を使用します。 perl #と同じです。 python #と同じです。 ruby #と同じです。 plain 内容のまま出力します(TODO:も付与しません)。 コメント書式が自動でなされないので、体裁を独自のものにしたい場合などに使います。 noprint 内容を出力しません。MTIgnoreタグと同じ結果になります。
制限 / ライセンス
制限によって出力されない文字などがあります。
ダイナミック用は用意していません。
htmlコメントの関係で、連続ハイフンを除去するようにしています。
現在のところ、<>などをエスケープしています。
テンプレートデバッグ用途を想定しているので、ユーザー数の多い場合で利用は勧められません。
ライセンス
ライセンスは MIT Licenseとします。
ダウンロード
リポジトリ
インストール
TODOフォルダをプラグインディレクトリ(plugins)にアップロードすれば、使用できる状態となります。プラグインの設定はありません。
for MT:AccessRankingGA で生成された json ファイルを php でパースするテンプレート
以前作成していたものをテンプレート向けに直してメモとして置いておきます。
AccessRankingGAは coolniikou 氏 提供のMovable Type 用プラグインであります。
※ 以下のテンプレートは AccessRankingGA の利用下で使用するものとします。
<?php $json = @file_get_contents("PATH/TO/Access_Ranking.json" , true); if($json === false){ echo '取得できませんでした orz'; } else { $base = 'http://example.com'; $obj = json_decode($json,true); $data=''; $data .= '<ol class="access_ranking">'; foreach($obj[rows] as $val){ $data .= '<li><a rel="nofollow" href="' . $base. $val[0]. '">' . $val[1] . '</a></li>'; } $data .= '</ol>'; echo $data; } ?>
実際には、 Cache_Lite を使用したり、サイト名を除去するなど、もう少し手間のかかることをやってます。
なお、Google Analytics の提供する JSON ファイルの構造に変更があったときなどメンテナンスが必要となります(これはjQueryでパースしてる場合も同じことです)。