Elementorを使用してA/Bテストを実行し、ちらつきを抑える方法

2025年01月21日 A/Bテスト A/Bテストを実行するレポート

WordPressサイトによっては、Elementorプラグインを使用してビューを管理し、Matomo A/Bテストコードをインストールしています。場合によっては、Elementorはコードを<body>タグを使用すると、ちらつきが発生します。

Elementorでちらつきを抑えるには、以下の方法を試してみてください：

1.オリジナル/コントロールページのカスタムJSコードを用意し、以下の変数を更新する。experimentName,originalPathそしてalternativeUrlをあなたの要求に従って調整します。また、ランダムロジックを希望の値に調整する必要があります。以下の例では、33%ずつの3つの均等配分を使用しています。

<script>
(function () {
    var experimentName = 'HomepageCloudCTA';
    var originalPath = '/pricing/'; // the originan and control URL. for homepage use '/'
    var alternativeUrl = '/alternative-pricing/';// redirect user to this alternative URL
    var cookiename = 'MatomoAbTesting';

    if (location.host !== 'matomo.org') {
        return; // don't run on fr.matomo.org
    }
    if (location.pathname !== originalPath) {
        return; // don't run test on this page
    }

    function isGroup(v) {
        if (navigator.cookieEnabled && navigator.userAgent.indexOf('bot') === -1) {
            return document.cookie.indexOf(cookiename + '=' + experimentName + v) !== -1;
        }
    }
    function setGroup(val) {
        document.cookie = cookiename + '=' + encodeURIComponent(experimentName + val) + '; expires=' + expiryDate + '; path=/;SameSite=Lax';
    }
    function track(variation) {   
        function trackAbTest() {
          window._paq = window._paq || [];
          window._paq.push(["AbTesting::enter", {experiment: experimentName, variation: variation}]);
        }
        
        if ('object' === typeof window && 'object' === typeof window.Matomo && window.Matomo.initialized) {
          // tracker is already loaded.
          trackAbTest();
        } else {
          // tracker is not loaded as this point and we need to wait until Matomo is loaded, then we can track it
          // if we were to call _paq.push too early we would create an extra tracker which would then cause an extra
          // tracker to be created which be unconfigured and would cause extra requests to the wrong endpoints that won't work
          if ('object' !== typeof window.matomoPluginAsyncInit) {
            window.matomoPluginAsyncInit = [];
          }
          window.matomoPluginAsyncInit.push(function () {
            Matomo.on('MatomoInitialized', trackAbTest);
          });
        }

    }
    var expiryDate = new Date();
    expiryDate.setTime(expiryDate.getTime() + (20*24*60*60*1000));
    expiryDate = expiryDate.toGMTString();
    if (isGroup('2')) {
        window.location.replace(alternativeUrl);
    } else if (isGroup('0')) {
        track('original');
    } else if (isGroup('1')) {
        track('control');
    } else if (navigator.cookieEnabled && navigator.userAgent.indexOf('bot') === -1) {
        var rand = Math.random();
        if (rand >= 0.666) { //Adjust the random logic as per your need
            setGroup(2);
            window.location.replace(alternativeUrl);
            return;
        } else if (rand >= 0.333) {
            setGroup(1);
            track('control');
        } else {
            setGroup(0);
            track('original');
        }
    }
})();
</script>

2.上記のカスタムコードをElementorスニペットとして追加する。

ABテストのタイトル名を入力$nameOfAbTest例えば、AB Test HomepageCloudCTA。
場所は以下の通り。head.
Publish “をクリックしてカスタムコードを作成する。
テストによっては、サイト全体に対して実行されます。特定のページだけをテストする場合は、Singularを選択し、次にテストを実行するページを選択します。例えば、トップページなら Front Page。技術的には、上記のスクリプトは特定のページでのみ実行されるので、サイト全体を選択することもできます。
保存して閉じる」をクリックする。

3.ヘッダーにカスタムJSコードが読み込まれているかどうかを確認するために、目的のページに行き、HTMLを検査する。

4.また、ブラウザ開発者ツールを開き、ブラウザ開発者ツールのコンソールにJSエラーがないことを確認する。

5.A/Bテストを正しくトラッキングするために、代替ページを更新する。

オルタナティブ」のページをご覧ください。
Elementorで編集」をクリックする。
HTMLウィジェットを検索する。
ページ上にドラッグする。
以下のスクリプトをelementorウィジェットのHTMLコードセクションに貼り付けます。そのmtmExperimentNameそしてmtmVariationName変数は、A/Bテストをどのように設定したかによって調整する必要があります。以下の例を参照してください。

<script>
function trackAbTest() {
  var mtmExperimentName = "HomepageCloudCTA";
  var mtmVariationName = "Try21DayFreeCloudTrial";
  
  window._paq = window._paq || [];
  window._paq.push(["AbTesting::enter", {experiment: mtmExperimentName, variation: mtmVariationName}]);
}

if ('object' === typeof window && 'object' === typeof window.Matomo && window.Matomo.initialized) {
  // tracker is already loaded.
  trackAbTest();
} else {
  // tracker is not loaded as this point and we need to wait until Matomo is loaded, then we can track it
  // if we were to call _paq.push too early we would create an extra tracker which would then cause an extra
  // tracker to be created which be unconfigured and would cause extra requests to the wrong endpoints that won't work
  if ('object' !== typeof window.matomoPluginAsyncInit) {
    window.matomoPluginAsyncInit = [];
  }
  window.matomoPluginAsyncInit.push(function () {
    Matomo.on('MatomoInitialized', trackAbTest);
  });
}
</script>

更新」ボタンをクリックする。
先ほど保存した代替ページのURLを開き、ブラウザの開発者コンソールでJavaScriptエラーがないことを確認する。

6.キャッシュをクリアする。

技術情報