Year 1 - UE 05 - Digital Analytics

Source: https://developer.matomo.org/guides/tagmanager/custom-trigger

First step, to generate the trigger

You need to go through the console and execute this within the terminal:

sudo ./console generate:tagmanager-trigger

within the matomo folder of your server.

Then answer to the different questions, here are the one that I used for this tutorial:

Enter the name of your plugin: TagManager

Enter the name of the trigger (CamelCase): KonamiCode

Second step, edit the json file of the TagManager plugin

So, you need to access to your plugin file located at plugins/TagManager/lang/en.json in my case:

cd plugins/TagManager/lang

Then edit the file accordingly with:

sudo gedit en.json

and then find the following lines and modify them accordingly:

"KonamiCodeTriggerName": "KonamiCode",
"KonamiCodeTriggerDescription": "This is the description for KonamiCode",
"KonamiCodeTriggerHelp": ""

in my case, I went for:

"KonamiCodeTriggerName": "KonamiCode",
"KonamiCodeTriggerDescription": "The well known Konami code reacts to the following sequence of keys within the client browser: up, up, down, down, left, right, left, right, b, a.",
"KonamiCodeTriggerHelp": "Well, there is nothing not much to say, no settings needed for the Konami code."

Third step, assigning the trigger to a category

Here clearly, I am wondering if I should create a specific category named "keys" because it happened when people are pressing keys or to assign it to the others category... well let's say keys.

Ok, so let's access back to our file:

cd plugins/TagManager/Template/Trigger

and then within it, we need to edit the file named KonamiCodeTrigger.php, in my case, I need to assign the category like this:

public function getCategory()
{
    return 'Keys';
}

Fourth step is about adding the icon

In order to do that, you need to find an icon which clearly shows what the trigger is about, then make it fit within a 64 pixels by 64. Then make it available on your Matomo server.

In my case, I am going to use the logo of the Konami video game... though I haven't got the authorization to do it.

Once your icon is ready, you can perform:

sudo mv your-file.svg matomo/plugins/TagManager/images/icons

Inkscape is a great software that you can use in order to make your icon fit the right space.

Ok, so now we need to make the link between this icon and the file where Matomo will look at, so edit KonamiCodeTrigger.php like this:

public function getIcon()
{
    return 'plugins/TagManager/images/icons/konami.svg';
}

Fifth step is about adding settings

Well, in my case, I don't have any settings to add, simply because the Konami code is sufficient to itself.

Sixth step, adding the JavaScript

Ok, that's the big part, the JavaScript part is the heart of the trigger, without it, nothing will work. The changes to perform are happening within the following file KonamiCodeTrigger.web.js.

When you look through the js default generated file it looks like this:

(function () {
    return function (parameters, TagManager) {
        this.setUp = function (triggerEvent) {
            TagManager.dom.onReady(function () {
                triggerEvent({event: 'DOMReady'});
            });
        };
    };
})();

But how do you edit this script in order to fit (in my case) this into it:

<script>
  var els, i, len, title;
  var konamiCode = '38,38,40,40,37,39,37,39,66,65';
  var keyPresses = [];
  var checkKonami = function(e) {
    keyPresses.push(e.keyCode);
    if (keyPresses.slice(keyPresses.length-10).join() === konamiCode) {
      runKonami();
    }
  };
  var runKonami = function() {
};
  document.addEventListener('keyup', checkKonami);
</script>

I asked to my friend Lukas to help me with it and he suggested this script which works fine:

(function () {
    return function (parameters, TagManager) {
        this.setUp = function (triggerEvent) {
            TagManager.dom.onReady(function () {
                var konamiCode = '38,38,40,40,37,39,37,39,66,65';
                var keyPresses = [];
                var checkKonami = function (e) {
                    keyPresses.push(e.keyCode);
                    if (keyPresses.slice(keyPresses.length - 10).join() === konamiCode) {
                        triggerEvent({event: 'KonamiCode'});
                    }
                };
                document.addEventListener('keyup', checkKonami);
            });
        };
    };
})();

and that's the end of the tutorial.