{% 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 piwik-enriched-headline
                help-url="https://matomo.org/docs/tracking-api/"
                rate="{{ 'CoreAdminHome_TrackingCode'|translate|e('html_attr') }}">{{ '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>
            <a href="#imageTracking">{{ 'CoreAdminHome_ImageTracking'|translate }}</a>
            <a href="#importServerLogs">{{ 'CoreAdminHome_ImportingServerLogs'|translate }}</a>
            <a href="#mobileAppsAndSdks">{{ 'SitesManager_MobileAppsAndSDKs'|translate }}</a>
            <a href="#trackingApi">{{ 'CoreAdminHome_HttpTrackingApi'|translate }}</a>
            {{ postEvent('Template.endTrackingCodePageTableOfContents') }}
        </div>
    </div>

    <input type="hidden" name="numMaxCustomVariables"
           value="{{ maxCustomVariables|e('html_attr') }}">

<div piwik-content-block
     anchor="javaScriptTracking"
     content-title="{{ 'CoreAdminHome_JavaScriptTracking'|translate|e('html_attr') }}">

    <div id="js-code-options" ng-controller="JsTrackingCodeController as jsTrackingCode">

        <p>
            {{ 'CoreAdminHome_JSTrackingIntro1'|translate }}
            <br/><br/>
            {{ 'CoreAdminHome_JSTrackingIntro2'|translate }} {{ 'CoreAdminHome_JSTrackingIntro3a'|translate('<a href="https://matomo.org/integrate/" rel="noreferrer noopener" target="_blank">','</a>')|raw }} {{ 'CoreAdminHome_JSTrackingIntro3b'|translate|raw }}
            <br/><br/>
            {{ 'CoreAdminHome_JSTrackingIntro4'|translate('<a href="#image-tracking-link">','</a>')|raw }}
            <br/><br/>
            {{ 'CoreAdminHome_JSTrackingIntro5'|translate('<a rel="noreferrer noopener" target="_blank" href="https://developer.matomo.org/guides/tracking-javascript-guide">','</a>')|raw }}
        </p>

        <div piwik-field uicontrol="site" name="js-tracker-website"
             class="jsTrackingCodeWebsite"
             ng-model="jsTrackingCode.site"
             ng-change="jsTrackingCode.changeSite(true)"
             introduction="{{ 'General_Website'|translate|e('html_attr') }}"
             value='{{ defaultSite|json_encode }}'>
        </div>

        <div id="optional-js-tracking-options">

            {# track across all subdomains #}
            <div id="jsTrackAllSubdomainsInlineHelp" class="inline-help-node">
                {{ 'CoreAdminHome_JSTracking_MergeSubdomainsDesc'|translate("x.<span class='current-site-host'></span>","y.<span class='current-site-host'></span>")|raw }}
                {{ 'General_LearnMore'|translate(' (<a href="https://developer.matomo.org/guides/tracking-javascript-guide#measuring-domains-andor-sub-domains" rel="noreferrer noopener" target="_blank">', '</a>)')|raw }}
            </div>

            <div piwik-field uicontrol="checkbox" name="javascript-tracking-all-subdomains"
                 ng-model="jsTrackingCode.trackAllSubdomains"
                 ng-change="jsTrackingCode.updateTrackingCode()"
                 data-disabled="jsTrackingCode.isLoading"
                 introduction="{{ 'General_Options'|translate|e('html_attr') }}"
                 data-title="{{ ('CoreAdminHome_JSTracking_MergeSubdomains'|translate ~ " <span class='current-site-name'></span>")|e('html_attr') }}"
                 value="" inline-help="#jsTrackAllSubdomainsInlineHelp">
            </div>

            {# group page titles by site domain #}
            <div id="jsTrackGroupByDomainInlineHelp" class="inline-help-node">
                {{ 'CoreAdminHome_JSTracking_GroupPageTitlesByDomainDesc1'|translate("<span class='current-site-host'></span>")|raw }}
            </div>

            <div piwik-field uicontrol="checkbox" name="javascript-tracking-group-by-domain"
                 ng-model="jsTrackingCode.groupByDomain"
                 ng-change="jsTrackingCode.updateTrackingCode()"
                 data-disabled="jsTrackingCode.isLoading"
                 data-title="{{ 'CoreAdminHome_JSTracking_GroupPageTitlesByDomain'|translate|e('html_attr') }}"
                 value="" inline-help="#jsTrackGroupByDomainInlineHelp">
            </div>

            {# track across all site aliases #}
            <div id="jsTrackAllAliasesInlineHelp" class="inline-help-node">
                {{ 'CoreAdminHome_JSTracking_MergeAliasesDesc'|translate("<span class='current-site-alias'></span>")|raw }}
            </div>

            <div piwik-field uicontrol="checkbox" name="javascript-tracking-all-aliases"
                 ng-model="jsTrackingCode.trackAllAliases"
                 ng-change="jsTrackingCode.updateTrackingCode()"
                 data-disabled="jsTrackingCode.isLoading"
                 data-title="{{ ('CoreAdminHome_JSTracking_MergeAliases'|translate ~ " <span class='current-site-name'></span>")|e('html_attr') }}"
                 value="" inline-help="#jsTrackAllAliasesInlineHelp">
            </div>

            <div piwik-field uicontrol="checkbox" name="javascript-tracking-noscript"
                 ng-model="jsTrackingCode.trackNoScript"
                 ng-change="jsTrackingCode.updateTrackingCode()"
                 data-disabled="jsTrackingCode.isLoading"
                 data-title="{{ 'CoreAdminHome_JSTracking_TrackNoScript'|translate|e('html_attr') }}"
                 value="" inline-help="">
            </div>

            <h3>{{ 'Mobile_Advanced'|translate }}</h3>

            <p>
                <a href="javascript:;"
                   ng-show="!jsTrackingCode.showAdvanced"
                   ng-click="jsTrackingCode.showAdvanced = true">{{ 'General_Show'|translate }}</a>
                <a href="javascript:;"
                   ng-show="jsTrackingCode.showAdvanced"
                   ng-click="jsTrackingCode.showAdvanced = false">{{ 'General_Hide'|translate }}</a>
            </p>

            <div id="javascript-advanced-options" ng-show="jsTrackingCode.showAdvanced">

                {# visitor custom variable #}
                <div piwik-field uicontrol="checkbox" name="javascript-tracking-visitor-cv-check"
                     ng-model="jsTrackingCode.trackCustomVars"
                     ng-change="jsTrackingCode.updateTrackingCode()"
                     data-disabled="jsTrackingCode.isLoading"
                     data-title="{{ 'CoreAdminHome_JSTracking_VisitorCustomVars'|translate|e('html_attr') }}"
                     value="" inline-help="{{ 'CoreAdminHome_JSTracking_VisitorCustomVarsDesc'|translate|e('html_attr') }}">
                </div>

                <div id="javascript-tracking-visitor-cv" ng-show="jsTrackingCode.trackCustomVars">
                    <div class="row">
                        <div class="col s12 m3">
                            {{ 'General_Name'|translate }}
                        </div>
                        <div class="col s12 m3">
                            {{ 'General_Value'|translate }}
                        </div>
                    </div>
                    <div class="row" ng-repeat="customVar in jsTrackingCode.customVars">
                        <div class="col s12 m6 l3">
                            <input type="text" class="custom-variable-name"
                                   ng-change="jsTrackingCode.updateTrackingCode()"
                                   ng-model="jsTrackingCode.customVars[$index.toString()].name"
                                   placeholder="e.g. Type"/>
                        </div>
                        <div class="col s12 m6 l3">
                            <input type="text" class="custom-variable-value"
                                   ng-change="jsTrackingCode.updateTrackingCode()"
                                   ng-model="jsTrackingCode.customVars[$index.toString()].value"
                                   placeholder="e.g. Customer"/>
                        </div>
                    </div>
                    <div class="row" ng-show="jsTrackingCode.canAddMoreCustomVariables">
                        <div class="col s12">
                            <a href="javascript:;"
                               ng-click="jsTrackingCode.addCustomVar()"
                               class="add-custom-variable"><span class="icon-add"></span> {{ 'General_Add'|translate }}</a>
                        </div>
                    </div>
                </div>

                {# cross domain support #}
                <div id="jsCrossDomain" class="inline-help-node">
                    {{ "CoreAdminHome_JSTracking_CrossDomain"|translate }}
                    <br/>
                    {{ 'CoreAdminHome_JSTracking_CrossDomain_NeedsMultipleDomains'|translate }}
                </div>

                <div piwik-field uicontrol="checkbox" name="javascript-tracking-cross-domain"
                     ng-model="jsTrackingCode.crossDomain"
                     ng-change="jsTrackingCode.updateTrackingCode();jsTrackingCode.onCrossDomainToggle();"
                     data-disabled="jsTrackingCode.isLoading || !jsTrackingCode.hasManySiteUrls"
                     data-title="{{ 'CoreAdminHome_JSTracking_EnableCrossDomainLinking'|translate|e('html_attr') }}"
                     value="" inline-help="#jsCrossDomain">
                </div>

                {# do not track support #}
                <div id="jsDoNotTrackInlineHelp" class="inline-help-node">
                    {{ 'CoreAdminHome_JSTracking_EnableDoNotTrackDesc'|translate }}
                    {% if serverSideDoNotTrackEnabled %}
                        <br/>
                        {{ 'CoreAdminHome_JSTracking_EnableDoNotTrack_AlreadyEnabled'|translate }}
                    {% endif %}
                </div>

                <div piwik-field uicontrol="checkbox" name="javascript-tracking-do-not-track"
                     ng-model="jsTrackingCode.doNotTrack"
                     ng-change="jsTrackingCode.updateTrackingCode() "
                     data-disabled="jsTrackingCode.isLoading"
                     data-title="{{ 'CoreAdminHome_JSTracking_EnableDoNotTrack'|translate|e('html_attr') }}"
                     value="" inline-help="#jsDoNotTrackInlineHelp">
                </div>

                {# disable all cookies options #}
                <div piwik-field uicontrol="checkbox" name="javascript-tracking-disable-cookies"
                     ng-model="jsTrackingCode.disableCookies"
                     data-disabled="jsTrackingCode.isLoading"
                     ng-change="jsTrackingCode.updateTrackingCode()"
                     data-title="{{ 'CoreAdminHome_JSTracking_DisableCookies'|translate|e('html_attr') }}"
                     value="" inline-help="{{ 'CoreAdminHome_JSTracking_DisableCookiesDesc'|translate|e('html_attr') }}">
                </div>

                {# custom campaign name/keyword query params #}
                <div id="jsTrackCampaignParamsInlineHelp" class="inline-help-node">
                    {{ 'CoreAdminHome_JSTracking_CustomCampaignQueryParamDesc'|translate('<a href="https://matomo.org/faq/general/#faq_119" rel="noreferrer noopener" target="_blank">','</a>')|raw }}
                </div>

                <div piwik-field uicontrol="checkbox" name="custom-campaign-query-params-check"
                     ng-model="jsTrackingCode.useCustomCampaignParams"
                     data-disabled="jsTrackingCode.isLoading"
                     ng-change="jsTrackingCode.updateTrackingCode()"
                     data-title="{{ 'CoreAdminHome_JSTracking_CustomCampaignQueryParam'|translate|e('html_attr') }}"
                     value="" inline-help="#jsTrackCampaignParamsInlineHelp">
                </div>

                <div ng-show="jsTrackingCode.useCustomCampaignParams" id="js-campaign-query-param-extra">
                    <div class="row">
                        <div class="col s12">
                            <div piwik-field uicontrol="text" name="custom-campaign-name-query-param"
                                 ng-model="jsTrackingCode.customCampaignName"
                                 ng-change="jsTrackingCode.updateTrackingCode()"
                                 data-disabled="jsTrackingCode.isLoading"
                                 data-title="{{ 'CoreAdminHome_JSTracking_CampaignNameParam'|translate|e('html_attr') }}"
                                 value="">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12">
                            <div piwik-field uicontrol="text" name="custom-campaign-keyword-query-param"
                                 ng-model="jsTrackingCode.customCampaignKeyword"
                                 ng-change="jsTrackingCode.updateTrackingCode()"
                                 data-disabled="jsTrackingCode.isLoading"
                                 data-title="{{ 'CoreAdminHome_JSTracking_CampaignKwdParam'|translate|e('html_attr') }}"
                                 value="">
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div id="javascript-output-section">
            <div class="valign-wrapper trackingHelpHeader matchWidth">
                <div>
                    <h3>{{ 'General_JsTrackingTag'|translate }}</h3>

                    <p>{{ 'CoreAdminHome_JSTracking_CodeNoteBeforeClosingHead'|translate("&lt;/head&gt;")|raw }}</p>
                </div>

                <button class="btn" id="emailJsBtn" ng-click="jsTrackingCode.sendEmail()">
                    {{ 'SitesManager_EmailInstructionsButton'|translate }}
                </button>
            </div>
            <div id="javascript-text">
                <pre piwik-select-on-focus class="codeblock"
                     ng-bind="jsTrackingCode.trackingCode"> </pre>
            </div>

        </div>
    </div>
</div>

<div piwik-content-block content-title="{{ 'CoreAdminHome_ImageTracking'|translate|e('html_attr') }}"
     anchor="imageTracking">
    <a name="image-tracking-link"></a>

    <div id="image-tracking-code-options" ng-controller="ImageTrackingCodeController as imageTrackingCode">

        <p>
            {{ 'CoreAdminHome_ImageTrackingIntro1'|translate }} {{ 'CoreAdminHome_ImageTrackingIntro2'|translate("<code>&lt;noscript&gt;&lt;/noscript&gt;</code>")|raw }}
        </p>
        <p>
            {{ 'CoreAdminHome_ImageTrackingIntro3'|translate('<a href="https://matomo.org/docs/tracking-api/reference/" rel="noreferrer noopener" target="_blank">','</a>')|raw }}
        </p>

        {# website #}
        <div piwik-field uicontrol="site" name="image-tracker-website"
             ng-model="imageTrackingCode.site"
             ng-change="imageTrackingCode.changeSite(true)"
             introduction="{{ 'General_Website'|translate|e('html_attr') }}"
             value='{{ defaultSite|json_encode }}'>
        </div>

        {# action_name #}
        <div piwik-field uicontrol="text" name="image-tracker-action-name"
             ng-model="imageTrackingCode.pageName"
             ng-change="imageTrackingCode.updateTrackingCode()"
             data-disabled="imageTrackingCode.isLoading"
             introduction="{{ 'General_Options'|translate|e('html_attr') }}"
             data-title="{{ 'Actions_ColumnPageName'|translate|e('html_attr') }}"
             value="">
        </div>

        {# goal #}
        <div piwik-field uicontrol="checkbox" name="image-tracking-goal-check"
             ng-model="imageTrackingCode.trackGoal"
             ng-change="imageTrackingCode.updateTrackingCode()"
             data-disabled="imageTrackingCode.isLoading"
             data-title="{{ 'CoreAdminHome_TrackAGoal'|translate|e('html_attr') }}"
             value="">
        </div>

        <div ng-show="imageTrackingCode.trackGoal"
             id="image-tracking-goal-sub">
            <div class="row">
                <div class="col s12 m6">
                    <div piwik-field uicontrol="select" name="image-tracker-goal"
                         options="imageTrackingCode.allGoals"
                         data-disabled="imageTrackingCode.isLoading"
                         ng-model="imageTrackingCode.trackIdGoal"
                         full-width="true"
                         ng-change="imageTrackingCode.updateTrackingCode()"
                         value="">
                    </div>
                </div>
                <div class="col s12 m6">
                    <div piwik-field uicontrol="text" name="image-revenue"
                         ng-model="imageTrackingCode.revenue"
                         ng-change="imageTrackingCode.updateTrackingCode()"
                         data-disabled="imageTrackingCode.isLoading"
                         full-width="true"
                         data-title="{{ 'CoreAdminHome_WithOptionalRevenue'|translate|e('html_attr') }} <span class='site-currency'></span>"
                         value="">
                    </div>
                </div>
            </div>
        </div>

        <div id="image-link-output-section">
            <h3>{{ 'CoreAdminHome_ImageTrackingLink'|translate }}</h3>

            <div id="image-tracking-text">
                <pre piwik-select-on-focus
                          ng-bind="imageTrackingCode.trackingCode"> </pre>
            </div>
        </div>
    </div>
</div>

<div piwik-content-block content-title="{{ 'CoreAdminHome_ImportingServerLogs'|translate|e('html_attr') }}"
     anchor="importServerLogs">
    <p>
        {{ 'CoreAdminHome_ImportingServerLogsDesc'|translate('<a href="https://matomo.org/log-analytics/" rel="noreferrer noopener" target="_blank">','</a>')|raw }}
    </p>
</div>

<div piwik-content-block content-title="{{ 'SitesManager_MobileAppsAndSDKs'|translate }}" anchor="mobileAppsAndSdks">
    <p>{{ 'SitesManager_MobileAppsAndSDKsDescription'|translate('<a href="https://matomo.org/integrate/#programming-language-platforms-and-frameworks" rel="noreferrer noopener" target="_blank">','</a>')|raw }}</p>
</div>

<div piwik-content-block content-title="{{ 'CoreAdminHome_HttpTrackingApi'|translate }}" anchor="trackingApi">
    <p>{{ 'CoreAdminHome_HttpTrackingApiDescription'|translate('<a href="https://developer.matomo.org/api-reference/tracking-api" rel="noreferrer noopener" target="_blank">','</a>')|raw }}</p>
</div>

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

{% endblock %}