Leitgedanken/msd2/tracking/piwik/plugins/Goals/templates/_formAddGoal.twig

<div piwik-content-block
     content-title="{{ 'Goals_AddNewGoal'|translate|e('html_attr') }}"
     class="addEditGoal"
     ng-show="manageGoals.showEditGoal">

    {% if addNewGoalIntro is defined and addNewGoalIntro %}
        {{ addNewGoalIntro|raw }}
    {% endif %}

    <div piwik-form>
        <div piwik-field uicontrol="text" name="goal_name"
             ng-model="manageGoals.goal.name"
             maxlength="50"
             title="{{ 'Goals_GoalName'|translate|e('html_attr') }}">
        </div>

        <div piwik-field uicontrol="text" name="goal_description"
             ng-model="manageGoals.goal.description"
             maxlength="255"
             title="{{ 'General_Description'|translate|e('html_attr') }}">
        </div>

        <div class="row goalIsTriggeredWhen">
            <div class="col s12">
                <h3>{{ 'Goals_GoalIsTriggered'|translate|e('html_attr') }}</h3>
            </div>
        </div>

        <div class="row">
            <div class="col s12 m6 goalTriggerType">
                <div piwik-field uicontrol="select" name="trigger_type"
                     ng-model="manageGoals.goal.triggerType"
                     ng-change="manageGoals.changedTriggerType()"
                     full-width="true"
                     options="{{ goalTriggerTypeOptions|json_encode }}">
                </div>
            </div>
            <div class="col s12 m6">
                <div piwik-alert="info" ng-show="manageGoals.goal.triggerType == 'manually'">
                    {{ 'Goals_WhereVisitedPageManuallyCallsJavascriptTrackerLearnMore'|translate("<a target='_blank' rel='noreferrer noopener' href='https://developer.matomo.org/guides/tracking-javascript-guide#manually-trigger-goal-conversions'>","</a>")|raw }}
                </div>

                <div piwik-field uicontrol="radio" name="match_attribute"
                     ng-show="manageGoals.goal.triggerType != 'manually'"
                     full-width="true"
                     ng-model="manageGoals.goal.matchAttribute"
                     options="{{ goalMatchAttributeOptions|json_encode }}">
                </div>
            </div>
        </div>

        <div class="row whereTheMatchAttrbiute" ng-show="manageGoals.goal.triggerType != 'manually'">
            <h3 class="col s12">{{ 'Goals_WhereThe'|translate|e('html_attr') }}
                <span ng-show="manageGoals.goal.matchAttribute == 'url'">
                    {{ 'Goals_URL'|translate }}
                </span>
               <span ng-show="manageGoals.goal.matchAttribute == 'title'">
                    {{ 'Goals_PageTitle'|translate }}
                </span>
               <span ng-show="manageGoals.goal.matchAttribute == 'file'">
                    {{ 'Goals_Filename'|translate }}
                </span>
               <span ng-show="manageGoals.goal.matchAttribute == 'external_website'">
                    {{ 'Goals_ExternalWebsiteUrl'|translate }}
                </span>
            </h3>
        </div>

        <div class="row" ng-show="manageGoals.goal.triggerType != 'manually'">
            <div class="col s12 m6 l4"
                 ng-show="manageGoals.goal.matchAttribute == 'event'">
                <div piwik-field uicontrol="select" name="event_type"
                     ng-model="manageGoals.goal.eventType"
                     full-width="true"
                     options="{{ eventTypeOptions|json_encode }}">
                </div>
            </div>

            <div class="col s12 m6 l4">
                <div piwik-field uicontrol="select" name="pattern_type"
                     ng-model="manageGoals.goal.patternType"
                     full-width="true"
                     options="{{ patternTypeOptions|json_encode }}">
                </div>
            </div>

            <div class="col s12 m6 l4">
                <div piwik-field uicontrol="text" name="pattern"
                     ng-model="manageGoals.goal.pattern"
                     maxlength="255"
                     title="{{ 'Goals_Pattern'|translate|e('html_attr') }}"
                     full-width="true">
                </div>
            </div>

            <div id="examples_pattern" class="col s12" piwik-alert="info">
                <span ng-show="manageGoals.goal.matchAttribute == 'url'">
                    {{ 'General_ForExampleShort'|translate }} {{ 'Goals_Contains'|translate("'checkout/confirmation'") }}
                    <br />{{ 'General_ForExampleShort'|translate }} {{ 'Goals_IsExactly'|translate("'http://example.com/thank-you.html'") }}
                    <br />{{ 'General_ForExampleShort'|translate }} {{ 'Goals_MatchesExpression'|translate("'(.*)\\\/demo\\\/(.*)'") }}
                </span>
               <span ng-show="manageGoals.goal.matchAttribute == 'title'">
                    {{ 'General_ForExampleShort'|translate }} {{ 'Goals_Contains'|translate("'Order confirmation'") }}
                </span>
               <span ng-show="manageGoals.goal.matchAttribute == 'file'">
                    {{ 'General_ForExampleShort'|translate }} {{ 'Goals_Contains'|translate("'files/brochure.pdf'") }}
                   <br />{{ 'General_ForExampleShort'|translate }} {{ 'Goals_IsExactly'|translate("'http://example.com/files/brochure.pdf'") }}
                   <br />{{ 'General_ForExampleShort'|translate }} {{ 'Goals_MatchesExpression'|translate("'(.*)\\\.zip'") }}
                </span>
               <span ng-show="manageGoals.goal.matchAttribute == 'external_website'">
                    {{ 'General_ForExampleShort'|translate }} {{ 'Goals_Contains'|translate("'amazon.com'") }}
                   <br />{{ 'General_ForExampleShort'|translate }} {{ 'Goals_IsExactly'|translate("'http://mypartner.com/landing.html'") }}
                   <br />{{ 'General_ForExampleShort'|translate }} {{ 'Goals_MatchesExpression'|translate("'http://www.amazon.com\\\/(.*)\\\/yourAffiliateId'") }}
                </span>
               <span ng-show="manageGoals.goal.matchAttribute == 'event'">
                    {{ 'General_ForExampleShort'|translate }} {{ 'Goals_Contains'|translate("'video'") }}
                   <br />{{ 'General_ForExampleShort'|translate }} {{ 'Goals_IsExactly'|translate("'click'") }}
                   <br />{{ 'General_ForExampleShort'|translate }} {{ 'Goals_MatchesExpression'|translate("'(.*)_banner'") }}"
                </span>
            </div>
        </div>


        <div piwik-field uicontrol="checkbox" name="case_sensitive"
             ng-model="manageGoals.goal.caseSensitive"
             ng-show="manageGoals.goal.triggerType != 'manually'"
             title="{{ 'Goals_CaseSensitive'|translate|e('html_attr') }} {{ 'Goals_Optional'|translate|e('html_attr') }}">
        </div>

        <div piwik-field uicontrol="radio" name="allow_multiple"
             ng-model="manageGoals.goal.allowMultiple"
             options="{{ allowMultipleOptions|json_encode }}"
             introduction="{{ 'Goals_AllowMultipleConversionsPerVisit'|translate|e('html_attr') }}"
             inline-help="{{ 'Goals_HelpOneConversionPerVisit'|translate|e('html_attr') }}">
        </div>

        <h3>{{ 'Goals_GoalRevenue'|translate }} {{ 'Goals_Optional'|translate }}</h3>

        <div piwik-field uicontrol="number" name="revenue"
             ng-model="manageGoals.goal.revenue"
             placeholder="{{ 'Goals_DefaultRevenueLabel'|translate }}"
             inline-help="{{ 'Goals_DefaultRevenueHelp'|translate|e('html_attr') }}">
        </div>

        <div piwik-field uicontrol="checkbox" name="use_event_value"
             ng-model="manageGoals.goal.useEventValueAsRevenue"
             title="{{ 'Goals_UseEventValueAsRevenue'|translate|e('html_attr') }}"
             ng-show="manageGoals.goal.matchAttribute == 'event'"
             inline-help="{{ 'Goals_EventValueAsRevenueHelp'|translate|e('html_attr') }} &lt;br/&gt;&lt;br/&gt; {{ 'Goals_EventValueAsRevenueHelp2'|translate|e('html_attr') }}"
        >
        </div>

        {{ postEvent("Template.endGoalEditTable") }}

        <input type="hidden" name="goalIdUpdate" value=""/>
        <div piwik-save-button
             saving="manageGoals.isLoading"
             onconfirm="manageGoals.save()"
             ng-value="manageGoals.goal.submitText"></div>

        {% if onlyShowAddNewGoal is not defined %}
            <div class='entityCancel' ng-show="manageGoals.showEditGoal" ng-click="manageGoals.showListOfReports()">
                {{ 'General_OrCancel'|translate("<a class='entityCancelLink'>","</a>")|raw }}
            </div>
        {% endif %}
    </div>

</div>