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が存在すればページビューを送信するようにしています。

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

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

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

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