WooCommerceとMauitcを連携するプラグインを作ってみた話

公開プラグインとして作ったものではないので、一般に利用できるものではないですがいろいろやってみました。

そのときに感じたことをもろもろとまとめます。

WordPressとMautic API Libの相性はちょっとよくない

いきなりネガティブなことになりますが、WPの仕様との相性はあまりよくないです。

というのもWordPressでは_SESSIONを使うなというのがスタンダードなコーディングスタイルだからです。

参考:Code Review: What We Look For – WordPress.com VIP: Enterprise content management platform

そのためMautic API Lib for PHPを使うとWordPress向けに設定されたphpcsがwarningをはいてきますが、ライブラリごと作り直すくらいしか対応方法が思いつかないのである程度割り切りましょう。

WooCommerce / WordPressはフックが多いため、データ取得などはやりやすい

全購入ステップ1つ1つに割り込みできるんじゃないかと思えるくらいフックが豊富なのがWordPress / WooCommerceの特徴の1つかなと思います。

WooCommerceの顧客IDとMauticのコンタクトIDのマッピングさえできていれば、特定の行動(カゴ落ち・キャンセル)などに対してセグメント追加やタグ付けなどのアクションを発火させることも可能そうです。

WooCommerceの顧客IDとMauticのコンタクトIDはそれぞれ内部に持たせておくのが無難

WordPressもMauticもIDからユーザー情報を取得します。
ですのでカスタムフィールドやユーザーメタを用いてWordPressにはMauticのコンタクトIDを、MauticにはWordPressのユーザーIDを保存しておくのが無難かなと思います。

ということでざっとですが、以上です。

React + react-routerでPageviewをトラッキングする

通常ではindex.htmlに以下のようなコードを書くだけでOKです。

    <script>
      (function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
          w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
          m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://whoge.mautic.net/mtc.js','mt');

      mt('send', 'pageview')
  </script>

しかしJS内でページ遷移が発生するSPAなどでは、初回ロードしかトラッキングしてくれません。

React + react-route (v4)の場合は、以下のようにすることで対応できました。

class AppRoutes extends React.Component {
  componentWillUpdate() {
    const MauticJS = 'MauticJS'
    if (window.hasOwnProperty(MauticJS)) {
      window[MauticJS].sendPageview()
    }
  }
  render () {
    return (
      <Switch>
        <Route exact path="/" component={RouteTop} exact />
        <Route path="/:slug" component={RouteSingle} />
      </Switch>
    )
  }
}

MauticJSオブジェクトが生成されるまですこしラグがあります。
また、初回ロードはhtmlに記載したmt関数でトラッキングできています。

そのため、routeタグをまとめたコンポーネントを用意して、componentWIllUpdateなどでページ遷移を検知します。
その後、window.MauticJSが存在すればページビューを送信するようにしています。

ページビューがトラッキングされている様子

もうちょっと良い方法などがあるかもですが、ひとまず現時点でわかっている方法として記録します。

"Problem binding to port 443"でLet’s Encryptの証明書更新に失敗した場合の対応メモ

Let’s Encryptの証明書更新に失敗した時の対応メモとは別パターンのエラーに遭遇したのでこちらもメモ。

現象

an unexpected error: Problem binding to port 443: Could not bind to IPv4 or IPv6.. Skipping.というエラーで更新に失敗する。

# /usr/local/letsencrypt/letsencrypt-auto renew
Saving debug log to /var/log/letsencrypt/letsencrypt.log

-------------------------------------------------------------------------------
Processing /etc/letsencrypt/renewal/example.com.conf
-------------------------------------------------------------------------------
Cert is due for renewal, auto-renewing...
Plugins selected: Authenticator standalone, Installer None
Renewing an existing certificate
Performing the following challenges:
tls-sni-01 challenge for example.com
Cleaning up challenges
Attempting to renew cert (example.com) from /etc/letsencrypt/renewal/example.com.conf produced an unexpected error: Problem binding to port 443: Could not bind to IPv4 or IPv6.. Skipping.
All renewal attempts failed. The following certs could not be renewed:
  /etc/letsencrypt/live/example.com/fullchain.pem (failure)

-------------------------------------------------------------------------------

All renewal attempts failed. The following certs could not be renewed:
  /etc/letsencrypt/live/example.com/fullchain.pem (failure)
-------------------------------------------------------------------------------

対応

Trying to renew cert on nginx but getting “Problem binding to port 443: Could not bind to IPv4 or IPv6” – Let’s Encryptを見る限り、443ポートを使用しているサーバーを止めてから作業すると動く様子。

# service httpd stop
Stopping httpd:                                            [  OK  ]

更新

[root@ip-172-31-24-26 ~]# /usr/local/letsencrypt/letsencrypt-auto renew
Saving debug log to /var/log/letsencrypt/letsencrypt.log

-------------------------------------------------------------------------------
Processing /etc/letsencrypt/renewal/example.com.conf
-------------------------------------------------------------------------------
Cert is due for renewal, auto-renewing...
Plugins selected: Authenticator standalone, Installer None
Renewing an existing certificate
Performing the following challenges:
tls-sni-01 challenge for example.com
Waiting for verification...
Cleaning up challenges

-------------------------------------------------------------------------------
new certificate deployed without reload, fullchain is
/etc/letsencrypt/live/example.com/fullchain.pem
-------------------------------------------------------------------------------

-------------------------------------------------------------------------------

Congratulations, all renewals succeeded. The following certs have been renewed:
  /etc/letsencrypt/live/example.com/fullchain.pem (success)
-------------------------------------------------------------------------------

再起動

[root@ip-172-31-24-26 ~]# service httpd start
Starting httpd:                                            [  OK  ]

更新を確認

[root@ip-172-31-24-26 ~]# openssl x509 -noout -dates -in /etc/letsencrypt/live/example.com/fullchain.pem
notBefore=Oct 30 14:56:43 2017 GMT
notAfter=Jan 28 14:56:43 2018 GMT

CLIでMauticコアのアップデートが"Package could not be found!"となった場合の対応

Issueも立てているのですが、手動での対応法を覚書として残しておきます。

現象

2.9.xから2.10.1へのアップデート時に以下の様なエラーが出るケースがありました。

$ cd /PATH/TO/MAUTIC
$ php upgrade.php
Checking for new updates...updating to 2.10.1!
Extracting the update package...failed. Package could not be found!

コアのソースコードを見る限りでは、zipファイルの取得に失敗している様子です。

対応

Issueのコメントにて、「zip取れてないから、直接おいてやればいいよ」というコメントがありましたのでそれで対応しています。

$ wget https://github.com/mautic/mautic/releases/download/2.10.1/2.10.1.zip
$ mv 2.10.1.zip 2.10.1-update.zip
$ php upgrade.php
Checking for new updates...updating to 2.10.1!
Extracting the update package...done!
Moving files...done!
Clearing the cache...done!
Rebuilding the cache...done!
Applying migrations...done!
Cleaning up...done!

Success!

Mauticでは、{バージョン番号}-update.zipという命名規則でファイルがDLされます。(該当コードはこちら
ですのでzipファイルをDLして、その名前に変更してやることでアップデートスクリプトが問題なく実行される様になります。

そのほか

該当ファイルがある場合はDLせずにそのまま展開して実行していく様子です。
なのでリネーム時に最新版のバージョン名へ偽装すればバージョン指定のアップデートもできるのかもしれません。(おすすめはしませんが)

CLIでMauitcコアのバージョンを指定してアップデートする

諸刃の剣なのでまったくおすすめしませんが、できるのはできたのでメモ。
アドオンや運用時のローカルテストくらいにしか使えなさそうです。

手順

やり方は簡単で、古いバージョンのコアzipファイルを最新版のバージョン名で配置しておくだけです。

$ cd /PATH/TO/MAUTIC
$ wget https://github.com/mautic/mautic/releases/download/2.8.1/2.8.1.zip
$ mv 2.8.1-update.zip 2.10.1-update.zip
$ php upgrade.php
Checking for new updates...updating to 2.10.1!
Extracting the update package...done!
Moving files...done!
Clearing the cache...done!
Rebuilding the cache...done!
Applying migrations...done!
Cleaning up...done!

Success!

GUIからアクセスすると、2.8.1で動作していることが確認できます。

CLIからもアップデートが必要なバージョンであることを認識していることが確認できました。

# php app/console mautic:update:find
Mauticのバージョン 2.10.1 がダウンロード可能です。詳細は https://www.mautic.org/community/index.php/8475-2-10-1-released をお読みください。
アップデートするにはコマンドラインから'php app/console mautic:update:apply'を実行してください。

やっぱり最新版にしたい場合

偽装しているzipファイルを消してphp upgrade.phpを実行しましょう。
上記手順と同様にwgetなどで最新版のzipファイルを直接配置するのも1つです。

ただし

コアチームの意図している動きではないので、このアップデートで事故るケースの方がおそらく多いと思います。
Vagrant / Dockerなどの使い捨てにしてもいい環境で、バージョンを指定したテストしたい場合に使う程度にしてください。

2.9.2 -> 2.8.1 -> 2.10.1を試して出たエラー(一部)

# php app/console doctrine:migrations:migrate

  [Doctrine\ORM\Mapping\MappingException]
  Duplicate definition of column 'id' on entity 'Mautic\CoreBundle\Entity\MessageQueue' in a field or discriminator column mapping.

]# tail app/logs/mautic_prod-2017-10-25.php
[2017-10-25 17:25:07] mautic.ERROR: Symfony\Component\Debug\Exception\FatalErrorException: Notice: require(): Failed opening required '/var/www/html/app/cache/prod/doctrine/orm/Proxies/__CG__MauticStageBundleEntityStage.php' (include_path='.:/usr/share/pear:/usr/share/php') - in file /var/www/html/vendor/doctrine/common/lib/Doctrine/Common/Proxy/AbstractProxyFactory.php - at line 209 [] []
$ tail -f /var/log/httpd/ssl_error_log
[Wed Oct 25 08:30:26.615227 2017] [:error] [pid 3345] [client 210.170.194.219:52779] PHP Warning:  require(/var/www/html/app/cache/prod/doctrine/orm/Proxies/__CG__MauticStageBundleEntityStage.php): failed to open stream: No such file or directory in /var/www/html/vendor/doctrine/common/lib/Doctrine/Common/Proxy/AbstractProxyFactory.php on line 209, referer: https://13.114.212.68/s/login
[Wed Oct 25 08:30:26.615264 2017] [:error] [pid 3345] [client 210.170.194.219:52779] PHP Fatal error:  require(): Failed opening required '/var/www/html/app/cache/prod/doctrine/orm/Proxies/__CG__MauticStageBundleEntityStage.php' (include_path='.:/usr/share/pear:/usr/share/php') in /var/www/html/vendor/doctrine/common/lib/Doctrine/Common/Proxy/AbstractProxyFactory.php on line 209, referer: https://13.114.212.68/s/login

そもそも

最新版で動く様に使って欲しいなと思う次第です。

Let's Encryptの証明書更新に失敗した時の対応メモ

エラー文

# /usr/local/letsencrypt/certbot-auto renew && /sbin/service httpd restart > /dev/null 2>&1
Upgrading certbot-auto 0.9.3 to 0.11.1...
Replacing certbot-auto...
Creating virtual environment...
Installing Python packages...
Installation succeeded.
Traceback (most recent call last):
  File "/root/.local/share/letsencrypt/bin/letsencrypt", line 7, in 
    from certbot.main import main
  File "/root/.local/share/letsencrypt/local/lib/python2.7/dist-packages/certbot/main.py", line 11, in 
    import zope.component
  File "/root/.local/share/letsencrypt/local/lib/python2.7/dist-packages/zope/component/__init__.py", line 16, in 
    from zope.interface import Interface
ImportError: No module named interface

復旧時に実行したコマンド

/root/.local/share/letsencrypt/bin/letsencrypt に問題がある様子だったので、一旦削除または/tmpなどの別ディレクトリへ移動してから再試行した。

# rm /root/.local/share/letsencrypt/bin/letsencrypt
# unset PYTHON_INSTALL_LAYOUT
# /usr/local/letsencrypt/certbot-auto renew && /sbin/service httpd restart > /dev/null 2>&1

参考

Mautic API LibraryでMautic APIをコールする(oAuth2認証編)

MauticのデータをMautic外で扱いたい時、Mauticが持つREST APIをコールすることができます。そしてREST APIの呼び出し方法については、公式のドキュメントに「PHPのライブラリがあるからそれを使ってください」と書かれています。

ということで何回かに分けて、「Mautic API Library」を使ってMauticのREST APIを利用する方法をご紹介します。

ライブラリのインストール

まずはライブラリをインストールします。
composerを使って手に入れることが可能ですので、作業ディレクトリに移動してから以下のコマンドでインストールします。

$ cd /PATH/TO/WORKSPACE
$ composer require mautic/api-library

実行すると、以下のようにcomposerによるインストールが始まります。

Using version ^2.1 for mautic/api-library
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
  - Installing psr/log (1.0.2)
    Downloading: 100%

  - Installing mautic/api-library (2.1.1)
    Downloading: 100%

Writing lock file
Generating autoload files

MauticでAPIクレデンシャルを作成する

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-26-19-00-25

作成すると、Client KeyとClient Secret Keyが生成されますので、控えておきましょう。

oAuth2認証を実施する

それでは早速APIへの認証を始めます。

サンプルコード:開発ドキュメントのコードを参考に、以下のようなファイルを作成します。($settingsの値は自分の値に変更してください。)

index.php

<?php
// Bootup the Composer autoloader
include __DIR__ . '/vendor/autoload.php';
use Mautic\Auth\ApiAuth;

// ApiAuth::initiate will accept an array of OAuth settings
$settings = array(
    'baseUrl'      => 'https://YOUR_MAUTIC_URL',
    'version'      => 'OAuth2',
    'clientKey'    => 'YOUR_MAUTIC_CLIENT_KEY',
    'clientSecret' => 'YOUR_MAUTIC_CLIENT_SECRET',
    'callback'     => 'http://YOUR_WEBSITE_URL'
);
session_start();
// Initiate the auth object
$auth = ApiAuth::initiate($settings);

if ($auth->validateAccessToken()) {
    if ($auth->accessTokenUpdated()) {
        $accessTokenData = $auth->getAccessTokenData();
        foreach($accessTokenData as $key => $value ) {
            echo "$key: $value<br/>";
        }
    }
}

index.phpを実行する

あとは先程作成したファイルを実行すればOKです。

ブラウザからアクセスすると、Mauticの認証画面へリダイレクトされます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-26-19-04-22

許可をクリックすると、上で作成したコードの$accessTokenDataにアクセストークンなどのデータを含めた状態でコールバックURLにアクセスします。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-26-19-02-15

今回はここまで。
次回からはこのアクセストークンの情報を使って実際にデータの取得などを行ってみます。

Mautic REST APIを有効化する

MauticのデータをMautic外で扱いたい時、Mauticが持つREST APIをコールすることができます。
このMautic REST APIはデフォルトでは無効化されていますので、管理画面から有効化しましょう。

管理画面にアクセス

mautic
管理画面にログインした後、画面右上にある歯車ボタンをクリックします。

このボタンをクリックすると、Mauticの設定に関するパネルが開きますので、

開かれたパネルの中から「Configuration」をクリックしましょう。

mautic

API Settingsへ移動し、有効化する

「Configuration」ではAPIだけでなく、管理画面の言語設定やメールに関する設定なども行うことができます。

画面左側にサブメニューが表示されていますので、この中から「API Settings」をクリックしましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-26-18-31-35

「API enabled?」という項目がありますので、ここをYESに切り替えれて保存すればOKです。

設定が完了している場合は、以下の画像のように右側のメニューに「API Credentials」という項目が追加されています。

mautic

ドキュメントなど

これでMautic REST APIの利用準備ができました。

Mautic REST APIの利用方法等については、公式の開発ドキュメントをご確認ください。

https://developer.mautic.org/#rest-api

このブログでも随時使い方について紹介してまいります。

Mautic1.4.1をぶっ飛ばしたときの復旧メモ

思いっきりやらかしたので、反省を込めて覚書。いわゆるところの始末書的な意味もこめて。

やらかしたこと

せっかくAWS使ってるのに、スナップショットを取らずにMauticをアップデートを実行した。
その結果アップデートに失敗してMauticにログインできなくなった。

根本的な問題

アップデートの様な大きな変更を入れる時は必ずスナップショットを作成する。

復旧までの覚書

やらかした先人はすでにいたので参考にする。
Uh Oh, Mautic upgrade was not successful

ファイルの退避

ソースコードを新しくとってくるので、既存のファイルを一時的に移動させる。

$ sudo mkdir /tmp/html.bk
$ sudo mv /var/www/html/* /tmp/html.bk/

Mauticコアの再取得

Mauticのコアファイルを新しくとってきます。
調子に乗ってここで最新バージョンをとってくるのではなく、おとなしくアップデート前のものをとってきましょう。復旧させるのが第一です。

$ sudo su -
# cd /var/www/html
# wget https://github.com/mautic/mautic/archive/1.4.1.zip
# unzip 1.4.1.zip
# mv mautic-1.4.1/* ./
# rm -f 1.4.1.zip
# rm -rf mautic-1.4.1

設定ファイル及び各種ファイルの復旧

もとのMauticの情報やファイルを利用できるように各ファイルを移動させます。
万が一に備えてmvではなくcpを使用します。

# cp /tmp/html.bk/app/config/local.php /var/www/html/app/config
# \cp -Rf /tmp/html.bk/media/* /var/www/html/media/
# \cp -Rf /tmp/html.bk/themes/* /var/www/html/themes/
# \cp -Rf /tmp/html.bk/plugins/* /var/www/html/plugins/

composer install

Mauticで利用するライブラリはComposerで管理されていますので、インストールします。

# cd /var/www/html
# composer install

パーミッションの復旧

ここまでrootで作業してるので、権限をapacheに戻しましょう。

# chown -R apache:apache /var/www/html
# chmod -R 775 /var/www/html/app/cache
# chmod -R 775 /var/www/html/app/logs
# chmod -R 775 /var/www/html/app/config
# exit

表示確認

ここまでやればサイトの表示は復旧している(はず)です。
今度はちゃんとスナップショットなどのバックアップを作成した上でアップデートを実施しましょう。

最後に

この記事を最後まで読む必要があった人は、とりあえず今すぐスナップショット作っておきましょう。
そうすれば少なくとも復旧したこのタイミングまでは簡単にロールバックができるようになります。

Mautic1.4.1から2.x系にアップデートする

Mauticを触っていると、以下の様なコマンドがあったり、管理画面で「Mauticアップデートしませんか?」という案内と共にアップデートボタンが表示されたりと、WordPressなどに近い感じで気軽にアップデートできるようになってます。

$ php app/console help mautic:update:apply

ただ、1.x系から2.x系へのアップデートに関してはどちらも絶対に使っちゃダメです。

リリースノートにもバッチシ「使うな」って書かれてます。

Our CLI command, php app/console mautic:update:apply WILL NOT WORK
https://github.com/mautic/mautic/releases/tag/2.0.0

これを知らずにアップデートを実行してしまうと、非常につらい思いをします。万が一やっちゃったという人は、Mautic1.4.1をぶっ飛ばしたときの復旧メモを参考に一旦復旧させましょう。というかアップデートはマジでバックアップとってからやりましょう

1.x系から2.x系へのアップデート方法

じゃあどうやってアップデートすれば良いのかですが、上記のリリースノートを読むと「このファイルを実行してくれ」という案内があります。

We have provided an upgrade script to use instead. Please download this script from https://raw.githubusercontent.com/mautic/mautic/master/upgrade.php, place in the root of your Mautic installation, and run it from CLI with php upgrade.php. It will fetch 2.0.0 and proceed to upgrade your Mautic installation.

https://github.com/mautic/mautic/releases/tag/2.0.0

こいつを使ってアップグレードしましょう。

実行した環境

今回は、Mautic Powered by AMIAGEで作られたMauticを使用しています。

実行ユーザーなどが異なる可能性がありますので、他の環境で実行される際はご注意ください。

実行コード

$ cd /var/www/html
$ sudo mv upgrade.php /tmp
$ sudo wget https://raw.githubusercontent.com/mautic/mautic/master/upgrade.php
$ sudo php upgrade.php
$ sudo chown -R apache:apache ./
$ sudo rm 2.1.1-update.zip