How to integrate additional JavaScript to report a purchase on the checkout/finish page in Shopware 6?

I'm working on a Shopware 6 project, and I need to integrate additional JavaScript code on the checkout/finish page to report a purchase to a third-party service or platform.

The existing code already includes JavaScript for tracking conversions with Google Ads, but I need to add separate logic to report the purchase details to another service.

Here is the relevant code:

{% sw_extends '@Storefront/storefront/page/checkout/finish/index.html.twig' %}

{% block layout_head_javascript_tracking_google_ads_after %}
    {{ parent() }}
    {% block layout_head_javascript_tracking_google_ads_after_finish %}
        {% if swagData.active and swagData.conversionLabel %}
            <script>
                window._tmGoogleAdsFns.push(function () {
                    gtag('event', 'conversion', {
                        'send_to': '{{ swagData.conversionId }}/{{ swagData.conversionLabel|escape('js') }}',
                        'value': '{{ page.order.amountNet|escape('js') }}',
                        'currency': '{{ context.currency.shortName|escape('js') }}',
                        'transaction_id': '{{ page.order.orderNumber|escape('js') }}'
                    });
                });
            </script>
        {% endif %}
    {% endblock %}
{% endblock %}

The purchase details I need to send include:

order number
total amount
currency

Can someone guide me on how to properly integrate the additional JavaScript code within the existing twig template?

I'm not sure where exactly to place the code and how to access the order details using twig variables.

Solution

Create a new file called index.html.twig in the <plugin root>/src/Resources/views/storefront/page/checkout/finish/ directory.

File contents index.html.twig:

{% sw_extends '@Storefront/storefront/page/checkout/finish/index.html.twig' %}

{% block layout_head_javascript_tracking_google_ads_after %}
    {{ parent() }}

    {% block block_name %}
        <script>
            // Write your code here
        </script>
    {% endblock %}
{% endblock %}

Use {{ dump(page.order) }} to get all variables available on this page.

Order number - {{ page.order.orderNumber }}
Total amount (gross) - {{ page.order.amountTotal }}
Total amount (net) - {{ page.order.amountNet }}
Currency - {{ context.currency.shortName }}

Additional documentation that will help you: