External Services
This document describes how inject external services into the application. The main outline is to add a GTM script in DatoCMS under “Site Settings” -> “External Services”, then the rest is managed inside GTM.
Pre-requisites
1. Create Matomo site
- Navigate to Matomo - All Websites
- Click “Add a new website”
- Pick “Website”
- Set the “Site name” to the name of the site you’re working on.
- Set the “URL” to the production URL of the site you’re working on.
- If the page has multiple domains for different languages, add them all here.
- Not if the customer wants different tracking for different markets though
- If the page has multiple domains for different languages, add them all here.
- Set the correct Currency and Timezone
- Click “Save”
2. Add Matomo to GTM
- Create a new Tag - Custom HTML
- Set trigger to “All pages”
- Add below script to the “Custom HTML” field
- Make sure you change the site ID to the one shown for you Matomo Website here
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://matomo.fullystudios.se/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '{{{THE_SITE_ID}}}' /* REPLACE WITH YOUR SITE ID */]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<script>
var waitForTrackerCount = 0;
function matomoWaitForTracker() {
if (typeof _paq === 'undefined') {
if (waitForTrackerCount < 40) {
setTimeout(matomoWaitForTracker, 250);
waitForTrackerCount++;
return;
}
} else {
document.addEventListener("cookieyes_consent_update", function (eventData) {
var data = eventData.detail;
consentSet(data);
});
}
}
function consentSet(data) {
if (data.accepted.includes("analytics")) {
_paq.push(['setCookieConsentGiven']);
_paq.push(['setConsentGiven']);
} else {
_paq.push(['forgetCookieConsentGiven']);
_paq.push(['forgetConsentGiven']);
}
}
document.addEventListener('DOMContentLoaded', matomoWaitForTracker());
</script>
<!-- End Matomo Code -->- Add a trigger
- Pick our “Consent” custom event
- Hit Save
2. Verify installation in GTM preview
Done
More reading