{% extends '@TagManager/tagmanager.twig' %}

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

{% block content %}
<div class="tagManagerGettingStarted">
    <h2>{{ 'TagManager_GettingStarted'|translate }}</h2>
    <div piwik-content-block content-title="What is a Tag Manager?">
        <p>
            Matomo Tag Manager lets you manage and unify all your tracking and marketing tags.
            Tags are also known as snippets or pixels. Such tags are typically JavaScript code or HTML and let
            you integrate various features into your site in just a few clicks, for example:
        </p>

        <ul>
            <li>Tracking analytics data</li>
            <li>Conversion Tracking</li>
            <li>Newsletter signups</li>
            <li>Exit popups and surveys</li>
            <li>Remarketing</li>
            <li>Social widgets</li>
            <li>Affiliates</li>
            <li>Ads</li>
            <li>and more</li>
        </ul>

        <p>
            <br />
            This can be achieved using these main components:
        </p>
        <ul>
            <li>Tags - A snippet of code (usually JavaScript or HTML) which will be added to your site.</li>
            <li>Triggers - Defines when a tag should be fired.</li>
            <li>Variables - Lets you retrieve data which can be used by tags and triggers.</li>
        </ul>
    </div>
    <div piwik-content-block content-title="Why or when do I need a Tag Manager?">
        <p>
            A Tag Manager makes your life easier when you want to modify any of these snippets on your website
            as you will no longer need a developer to make the needed changes for you. Instead of waiting for
            someone to make these changes and to deploy your website, you can now easily make the needed changes yourself.
            This lets you not only bring changes to the market faster, but also reduces cost.
            <br /><br />
            It also comes in handy if you embed many third-party snippets into your website and want to bring in some order to
            oversee all the snippets that are embedded and have a convenient way to manage them.
            <br /><br />
            The Tag Manager also makes sure all that all snippets are implemented correctly and loaded in the right way
            for faster performance.
        </p>

    </div>

    {% if canEdit %}
    <div piwik-content-block content-title="How do I get started?">
        <p>If you haven't created a container yet, <a href="{{ linkTo({module: 'TagManager', 'action': 'manageContainers'}) }}#?idContainer=0">create a container now</a>. Next you need to copy/paste the code for the container into your website, this is a simple HTML snippet. From this point, this code will
            load all other snippets and you usually won't need to make any changes to your website anymore.
            <br /><br />
            Now you can add one or multiple tags to your container. If you have embedded a tag manually into your site in the past, you should at the same time also remove all previously added snippets from your website as they will be then loaded through the tag manager.
        </p>
    </div>
    {% endif %}

    <div piwik-content-block content-title="What if a tag, trigger, or variable I need is not supported yet?">
        <p>
            There are custom tags, triggers, and variables available to let you implement pretty much any use case you need.
            <br /><br />
            If you use features regulary which are not available yet, or you have a product you want to integrate into the Tag Manager,
            please check out our
            <a href="https://developer.matomo.org/guides/tagmanager/settingup" target="_blank" rel="noreferrer noopener">developer documentation</a> on how to add your own tags, triggers, and variables. It is really easy.
        </p>

    </div>
</div>
{% endblock %}
