{% extends 'admin.twig' %}

{% block head %}
    {{ parent() }}
    <link rel="stylesheet" href="plugins/CoreAdminHome/stylesheets/jsTrackingGenerator.css" />
{% endblock %}

{% set title %}{{ 'CoreAdminHome_TrackingCode'|translate }}{% endset %}

{% block content %}

    <div class="card">
        <div class="card-content">
            <h2 vue-entry="CoreHome.EnrichedHeadline"
                help-url="{{ 'https://matomo.org/docs/tracking-api/'|trackmatomolink }}"
                rate="{{ 'CoreAdminHome_TrackingCode'|translate }}">{{ 'CoreAdminHome_TrackingCode'|translate  }}</h2>
            <p style="padding-left: 0;">{{ 'CoreAdminHome_TrackingCodeIntro'|translate }}</p>
        </div>
        <div class="card-action">
            {{ 'General_GoTo2'|translate }}:
            <a href="#/javaScriptTracking">{{ 'CoreAdminHome_JavaScriptTracking'|translate  }}</a>
            {{ postEvent('Template.afterJsTrackerMenu') }}
            <a href="#/imageTracking">{{ 'CoreAdminHome_ImageTracking'|translate }}</a>
            <a href="#/importServerLogs">{{ 'SitesManager_LogAnalytics'|translate }}</a>
            <a href="#/mobileAppsAndSdks">{{ 'SitesManager_MobileAppsAndSDKs'|translate }}</a>
            <a href="#/trackingApi">{{ 'CoreAdminHome_HttpTrackingApi'|translate }}</a>
            <a href="#/singlePageApplication">{{ 'SitesManager_SiteWithoutDataSinglePageApplication'|translate }}</a>
            <a href="#/google-tag-manager">{{ 'SitesManager_SiteWithoutDataGoogleTagManager'|translate }}</a>
            <a href="#/wordpress">WordPress</a>
            <a href="#/cloudflare">Cloudflare</a>
            <a href="#/vue">Vue.js</a>
            <a href="#/react">React.js</a>
            {{ postEvent('Template.endTrackingCodePageTableOfContents') }}
        </div>
    </div>

    <input type="hidden" name="numMaxCustomVariables"
           value="{{ maxCustomVariables }}">

<div
    vue-entry="CoreAdminHome.JsTrackingCodeGenerator"
    default-site="{{ defaultSiteDecoded|json_encode }}"
    max-custom-variables="{{ maxCustomVariables|json_encode }}"
    server-side-do-not-track-enabled="{{ serverSideDoNotTrackEnabled|json_encode }}"
></div>

{{ postEvent('Template.afterJsTracker') }}

<div
    vue-entry="CoreAdminHome.ImageTrackingCodeGenerator"
    default-site="{{ defaultSiteDecoded|json_encode }}"
></div>

<div vue-entry="CoreHome.ContentBlock" content-title="{{ 'SitesManager_LogAnalytics'|translate }}"
     anchor="importServerLogs">
    <p>
        {{ 'CoreAdminHome_ImportingServerLogsDesc'|translate(externallink('https://matomo.org/log-analytics/'),'</a>')|raw }}
    </p>
</div>

<div vue-entry="CoreHome.ContentBlock" content-title="{{ 'SitesManager_MobileAppsAndSDKs'|translate }}" anchor="mobileAppsAndSdks">
    <p>{{ 'SitesManager_MobileAppsAndSDKsDescription'|translate(externallink('https://matomo.org/integrate/#programming-language-platforms-and-frameworks'), '</a>')|raw }}</p>
</div>

<div vue-entry="CoreHome.ContentBlock" content-title="{{ 'CoreAdminHome_HttpTrackingApi'|translate }}" anchor="trackingApi">
    <p>{{ 'CoreAdminHome_HttpTrackingApiDescription'|translate(externallink('https://developer.matomo.org/api-reference/tracking-api'),'</a>')|raw }}</p>
</div>

<div vue-entry="CoreHome.ContentBlock" content-title="{{ 'SitesManager_SiteWithoutDataSinglePageApplication'|translate }}" anchor="singlePageApplication">
     <p>{{ 'CoreAdminHome_SinglePageApplicationDescription'|translate(externallink('https://developer.matomo.org/guides/spa-tracking'),'</a>')|raw }}</p>
</div>

<div vue-entry="CoreHome.ContentBlock" content-title="{{ 'SitesManager_SiteWithoutDataGoogleTagManager'|translate }}" anchor="google-tag-manager">
    <p>{{ 'CoreAdminHome_GoogleTagManagerDescription'|translate(externallink('https://matomo.org/faq/new-to-piwik/how-do-i-use-matomo-analytics-within-gtm-google-tag-manager/'),'</a>')|raw }}</p>
</div>

<div vue-entry="CoreHome.ContentBlock" content-title="WordPress" anchor="wordpress">
    <p>{{ 'CoreAdminHome_WordpressDescription'|translate(externallink('https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-wordpress/'),'</a>')|raw }}</p>
</div>

<div vue-entry="CoreHome.ContentBlock" content-title="Cloudflare" anchor="cloudflare">
    <p>{{ 'CoreAdminHome_CloudflareDescription'|translate(externallink('https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-my-cloudflare-setup/'),'</a>')|raw }}</p>
</div>

<div vue-entry="CoreHome.ContentBlock" content-title="Vue.js" anchor="vue">
    <p>{{ 'CoreAdminHome_VueDescription'|translate(externallink('https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-websites-that-use-vue-js/'),'</a>')|raw }}</p>
</div>

<div vue-entry="CoreHome.ContentBlock" content-title="React.js" anchor="react">
    <p>{{ 'CoreAdminHome_ReactDescription'|translate(externallink('https://matomo.org/faq/new-to-piwik/how-do-i-start-tracking-data-with-matomo-on-websites-that-use-react/'),'</a>')|raw }}</p>
</div>


{{ postEvent('Template.endTrackingCodePage') }}

{% endblock %}