Matomo WP Plugin Dashboard not showing

D-Nero · December 7, 2019, 8:17am

Hello,

I’m using the Wordpress Plugin (beta).
The Summary in the Wordpress admin section is working fine.
But when I tap on “reporting” the matomo dashboard is showing nothing except the navigation elements.
The center of the screen remains empty when I tap any link from the left menu.

The firefox inspector says:

Possibly unhandled rejection: null asset_manager_core_js.js:230:492
    e https://www.[...]/wp-content/plugins/matomo/assets/js/asset_manager_core_js.js?v=3.13.0?cb=1494ff302c87ece47fcad6d7d8580c0b:230
    get https://www.[...]/wp-content/plugins/matomo/assets/js/asset_manager_core_js.js?v=3.13.0?cb=1494ff302c87ece47fcad6d7d8580c0b:202
    g https://www.[...]/wp-content/plugins/matomo/assets/js/asset_manager_core_js.js?v=3.13.0?cb=1494ff302c87ece47fcad6d7d8580c0b:242
    $digest https://www.[...]/wp-content/plugins/matomo/assets/js/asset_manager_core_js.js?v=3.13.0?cb=1494ff302c87ece47fcad6d7d8580c0b:254
    $apply https://www.[...]/wp-content/plugins/matomo/assets/js/asset_manager_core_js.js?v=3.13.0?cb=1494ff302c87ece47fcad6d7d8580c0b:257
    l https://www.[...]/wp-content/plugins/matomo/assets/js/asset_manager_core_js.js?v=3.13.0?cb=1494ff302c87ece47fcad6d7d8580c0b:209
    onload https://www.[...]/wp-content/plugins/matomo/assets/js/asset_manager_core_js.js?v=3.13.0?cb=1494ff302c87ece47fcad6d7d8580c0b:215

I already tried to remove the plugin completely and to start from scratch but I was not successful.

Any help would be appreciated.
Thanks in advance.

thomas_matomo · December 8, 2019, 1:58am

Hi there,

when you look at the network tab in the developer tools, can you maybe see some resources not being loaded? Like an HTML file or so?

D-Nero · December 8, 2019, 5:05am

Hi,

I checked that. But no, everything is marked with a green status 200.

Best Regards

thomas_matomo · December 8, 2019, 9:41pm

Any chance you can give us access to your WordPress? You could create a new user assigning a Matomo role this way we shouldn’t have access to any of the other data in your WordPress (not tested though).

D-Nero · December 9, 2019, 6:37am

Sure. I could send you the credentials as a PM. But how can I send a PM?

Lukas · December 9, 2019, 9:11am

@D-Nero

Please send per mail it to hello at matomo.org

D-Nero · December 9, 2019, 9:50am

Hi,
I just sent an e-mail.
Thanks for your support.
Best Regards.

thomas_matomo · December 10, 2019, 6:21am

Thanks for sending us the login details. It seems like there might be some PHP error maybe. Is there any chance you could check your PHP and/or webserver logs to see if there is any error? You might also want to have a look at WP_DEBUG: I have an issue with the plugin, how do I troubleshoot and enable debug mode? FAQ - Analytics Platform - Matomo
It seems some requests simply don’t return data.

D-Nero · December 10, 2019, 7:19am

Hi,
thanks for investing the issue.
I just enabled Debug mode as described in the FAQ but no messages appeared on my site.
I then added

define( 'WP_DEBUG_LOG', true );

but also no log file appeared in /wp-content/.

Do you have any further ideas?

Thanks and best Regards.

riteshpandey · September 14, 2021, 2:57pm

I have the same problem. The Dashboard is empty.

Firefox Console shows this error.

Error: [$compile:tplrt] http://errors.angularjs.org/1.8.2/$compile/tplrt?p0=piwikRep…gmenu.directive.html%3Fcb%3D768ee1a9bfa7322ac08bd1551dea9df4
    F asset_manager_core_js.js:1007
    ha asset_manager_core_js.js:3244
    k asset_manager_core_js.js:5025
    $digest asset_manager_core_js.js:5426
    $apply asset_manager_core_js.js:5525
    k asset_manager_core_js.js:3980
    v asset_manager_core_js.js:4126
    onload asset_manager_core_js.js:4147
    Pg asset_manager_core_js.js:4142
    s asset_manager_core_js.js:4016
    b asset_manager_core_js.js:3946
    k asset_manager_core_js.js:5025
    $digest asset_manager_core_js.js:5426
    $apply asset_manager_core_js.js:5525
    c asset_manager_core_js.js:1411
    invoke asset_manager_core_js.js:2137
    c asset_manager_core_js.js:1406
    Wc asset_manager_core_js.js:1422
    Ee asset_manager_core_js.js:1375
    <anonymous> asset_manager_core_js.js:11319
    jQuery 13
asset_manager_core_js.js:4597

Lukas · September 14, 2021, 3:55pm

Hi @riteshpandey,

The error message shows the problem:

Matomo tries to load an HTML file like https://demo.matomo.cloud/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.directive.html, but doesn’t get anything back that looks like the HTML file Matomo expects.

So make sure you don’t have a webserver rule that is blocking or modifying this request (you can check the network tool of the Firefox developer tools for more detail)

riteshpandey · September 14, 2021, 5:22pm

Hi @Lukas

I checked the Network tab and did not find any request for the said file.

Here are two more errors that appear in Console.

Error: [$compile:tplrt] http://errors.angularjs.org/1.8.2/$compile/tplrt?p0=piwikQui…ccess.directive.html%3Fcb%3D768ee1a9bfa7322ac08bd1551dea9df4
    F asset_manager_core_js.js:1007
    ha asset_manager_core_js.js:3244
    k asset_manager_core_js.js:5025
    $digest asset_manager_core_js.js:5426
    $apply asset_manager_core_js.js:5525
    k asset_manager_core_js.js:3980
    v asset_manager_core_js.js:4126
    onload asset_manager_core_js.js:4147
    Pg asset_manager_core_js.js:4142
    s asset_manager_core_js.js:4016
    b asset_manager_core_js.js:3946
    k asset_manager_core_js.js:5025
    $digest asset_manager_core_js.js:5426
    $apply asset_manager_core_js.js:5525
    c asset_manager_core_js.js:1411
    invoke asset_manager_core_js.js:2137
    c asset_manager_core_js.js:1406
    Wc asset_manager_core_js.js:1422
    Ee asset_manager_core_js.js:1375
    <anonymous> asset_manager_core_js.js:11319
    jQuery 13
asset_manager_core_js.js:4597

Error: [$compile:tplrt] http://errors.angularjs.org/1.8.2/$compile/tplrt?p0=piwikRep…gmenu.directive.html%3Fcb%3D768ee1a9bfa7322ac08bd1551dea9df4
    F asset_manager_core_js.js:1007
    ha asset_manager_core_js.js:3244
    k asset_manager_core_js.js:5025
    $digest asset_manager_core_js.js:5426
    $apply asset_manager_core_js.js:5525
    k asset_manager_core_js.js:3980
    v asset_manager_core_js.js:4126
    onload asset_manager_core_js.js:4147
    Pg asset_manager_core_js.js:4142
    s asset_manager_core_js.js:4016
    b asset_manager_core_js.js:3946
    k asset_manager_core_js.js:5025
    $digest asset_manager_core_js.js:5426
    $apply asset_manager_core_js.js:5525
    c asset_manager_core_js.js:1411
    invoke asset_manager_core_js.js:2137
    c asset_manager_core_js.js:1406
    Wc asset_manager_core_js.js:1422
    Ee asset_manager_core_js.js:1375
    <anonymous> asset_manager_core_js.js:11319
    jQuery 13
asset_manager_core_js.js:4597

Here is how my Network tab looks for all HTML file requests

Lukas · September 14, 2021, 5:23pm

Hi,

The fourth entry in your screenshot looks exactly like the URL I mentioned (the ?cb= is just a random string to avoid fetching a stale file)

riteshpandey · September 15, 2021, 6:22am

Thanks @Lukas

Here is the response that I get.

<html><head></head><body><div class="reportingMenu"><ul class="navbar hide-on-med-and-down" role="menu" aria-label="{{ 'CoreHome_MainNavigation'|translate }}">
    <li ng-repeat="category in menuModel.menu" class="menuTab" role="menuitem" ng-class="{'active': category.active}">
        <a class="item" tabindex="5" href="" ng-click="loadCategory(category)">
            <span class="menu-icon {{ category.icon ? category.icon : 'icon-arrow-right' }}"></span>{{ category.name }}
            <span class="hidden">
             {{ 'CoreHome_Menu'|translate }}
           </span>
        </a>

        <ul role="menu">
            <li ng-repeat="subcategory in category.subcategories" role="menuitem" ng-class="{'active': subcategory.active}">
                <div ng-if="subcategory.isGroup" piwik-menudropdown show-search="true" menu-title="{{ subcategory.name|escape }}">
                    <a class="item" tabindex="5" ng-repeat="subcat in subcategory.subcategories" title="{{ subcat.tooltip }}" ng-class="{'active': subcat.active}" ng-href="#?{{ makeUrl(category,subcat) }}" ng-click="loadSubcategory(category, subcat)">
                        {{ subcat.name }}
                    </a>
                </div>

                <a ng-if="!subcategory.isGroup" ng-href="#?{{ makeUrl(category,subcategory) }}" class="item" ng-click="loadSubcategory(category, subcategory)">
                    {{ subcategory.name }}
                </a>

                <a class="item-help-icon" tabindex="5" href="javascript:" ng-if="subcategory.help" ng-click="showHelp(category, subcategory, $event)" ng-class="{'active': helpShownCategory == subcategory &amp;&amp; subcategory.help}">
                    <span class="icon-help"></span>
                </a>
            </li>
        </ul>
    </li>
</ul>
<ul id="mobile-left-menu" class="sidenav hide-on-large-only">
    <li class="no-padding" ng-repeat="category in menuModel.menu">
        <ul class="collapsible collapsible-accordion" piwik-side-nav="nav .activateLeftMenu">
            <li>
                <a class="collapsible-header"><i class="{{ category.icon ? category.icon : 'icon-arrow-bottom' }}"></i>{{ category.name }}</a>
                <div class="collapsible-body">
                    <ul>
                        <li ng-repeat="subcategory in category.subcategories">
                            <a ng-if="subcategory.isGroup" ng-repeat="subcat in subcategory.subcategories" ng-click="loadSubcategory(category, subcat)" ng-href="#?{{ makeUrl(category,subcat) }}">{{ subcat.name }}</a>
                            <a ng-if="!subcategory.isGroup" ng-click="loadSubcategory(category, subcategory)" ng-href="#?{{ makeUrl(category,subcategory) }}">{{ subcategory.name }}</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
</ul>

</div>
<script type="text/javascript">
  if (!window.Zephr) window.Zephr = {};
  window.Zephr.accessDetails = {"authenticated":true,"accessDecisions":{},"entitlements":{},"credits":{},"meters":{"81WcRn":{"usedInDecision":false,"totalCredits":4,"remainingCredits":4},"ql8yF5":{"usedInDecision":false,"totalCredits":2,"remainingCredits":2},"edtxuP":{"usedInDecision":false,"totalCredits":4,"remainingCredits":4}},"trialTrackingDetails":[],"testGroups":{"39df01bc-fa96-446e-91fb-db453d85dc1e":"B"},"activeProducts":[]};
</script>
<script type="text/javascript">
  window.Zephr = window.Zephr || {};
  window.Zephr.includeOutcomes = true;
  window.Zephr.outcomesAsEvents = false;
  window.Zephr.groupFields = false;
</script><script async type="text/javascript">
(function() {
    var xhr = new(XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0');
    xhr.open('GET', '/blaize/datalayer', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            var response;
            try {
                response = JSON.parse(xhr.response);
            } catch (e) {
                response = xhr.response;
            }
            if (xhr.status === 200) {
                for (var dataLayerFieldName in response) {
                    if (!(dataLayerFieldName in window)) window[dataLayerFieldName] = [];

                    var pageView = response[dataLayerFieldName];
                    var events = [];

                    if (window.Zephr && window.Zephr.includeOutcomes && window.Zephr.outcomes) {
                        pageView.zephrOutcomes = window.Zephr.outcomes;

                        if (window.Zephr.outcomesAsEvents) {
                            Object.keys(window.Zephr.outcomes || []).forEach(function(outcomeKey) {
                                var outcomeEvent = {
                                    event: "zephr-outcome-" + outcomeKey,
                                    featureId: outcomeKey,
                                    featureLabel: window.Zephr.outcomes[outcomeKey].featureLabel,
                                    outcomeId: window.Zephr.outcomes[outcomeKey].outcomeId,
                                    outcomeLabel: window.Zephr.outcomes[outcomeKey].outcomeLabel,
                                };
                                events.push(outcomeEvent);
                            });
                        }
                    }
                    if (window.Zephr && window.Zephr.accessDetails) {
                        (window.Zephr.accessDetails.trialTrackingDetails || []).forEach(function(details) {
                            var type = details.entitlementType === 'credits' ? 'credits' : 'meters';
                            var trial = (window.Zephr.accessDetails[type] || {})[details.entitlementId];
                            if (!trial) return;
                            if (window.Zephr.groupFields && !pageView.zephrTrials) pageView.zephrTrials = {};
                            if (details.creditsRemainingKey) {
                                if (window.Zephr.groupFields) {
                                    pageView.zephrTrials[details.creditsRemainingKey] = trial.remainingCredits;
                                } else {
                                    pageView[details.creditsRemainingKey] = trial.remainingCredits;
                                }
                            }
                            if (details.creditsUsedKey) {
                                if (window.Zephr.groupFields) {
                                    pageView.zephrTrials[details.creditsUsedKey] = trial.totalCredits - trial.remainingCredits;
                                } else {
                                    pageView[details.creditsUsedKey] = trial.totalCredits - trial.remainingCredits;
                                }
                            }
                        });
                    }
                    if (Object.keys(pageView).length) {
                        pageView.event = "zephr-pageview";
                        events.unshift(pageView);
                    }
                    if (!events.length) continue;

                    events.forEach(function(event) {
                        window[dataLayerFieldName].push(event);
                    });
                }
                var readyEvent = document.createEvent('Event');
                readyEvent.initEvent('zephr.dataLayerReady', true, true);
                document.dispatchEvent(readyEvent);
            }
        }
    }
    xhr.send({});
})();

</script></body></html>

Lukas · September 15, 2021, 6:43am

And this is how the file should look like:

github.com

matomo-org/matomo/blob/4.x-dev/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.directive.html

<div class="reportingMenu"><ul class="navbar hide-on-med-and-down" role="menu" aria-label="{{ 'CoreHome_MainNavigation'|translate }}">
    <li ng-repeat="category in menuModel.menu"
        class="menuTab"
        role="menuitem"
        ng-class="{'active': category.active}">
        <a class="item" tabindex="5"
           href=""
           ng-click="loadCategory(category)">
            <span class="menu-icon {{ category.icon ? category.icon : 'icon-arrow-right' }}"></span>{{ category.name }}
            <span class="hidden">
             {{ 'CoreHome_Menu'|translate }}
           </span>
        </a>

        <ul role="menu">
            <li ng-repeat="subcategory in category.subcategories"
                role="menuitem"
                ng-class="{'active': subcategory.active}">
                <div ng-if="subcategory.isGroup" piwik-menudropdown show-search="true" menu-title="{{ subcategory.name|escape }}">
                    <a class="item" tabindex="5"

This file has been truncated. show original

As you can see your Webserver adds a <html><head></head><body> in the beginning and a large javascript block related to window.Zephr.

So please set up your webserver to not modify files to make sure Matomo works correctly.

riteshpandey · September 15, 2021, 7:15am

Thanks @Lukas

Looks like the reverse proxy which sits in front of my server is adding this. Thanks for your quick help. I’ll get this sorted with them.

Alex_Wood · December 29, 2022, 6:48pm

Hi,
Alex wood here,
I also using the Matomo plugin on a WordPress website where Angular is also included in Wordpress site Aero insta and when I’m logged into my Matomo dashboard, I do not see the “Platform > Marketplace” as any option in the left sidebar menu.