Google Tag Manager Code Integration for Default Flows – Google Analytics 4

Overview

The Google Tag Manager (GTM) is a small piece of JavaScript and non-JavaScript code (a container snippet) that you paste into your pages to configure or enable tags from Google Analytics or third parties. For more information on the Google Tag Manager and how to install it, click here: https://support.google.com/tagmanager/answer/6102821?hl=en&ref_topic=3441530

Setting the Google Tag Manager (GTM)

1

Add GTM code to your 2Checkout template

1. Log into your 2Checkout Merchant Control Panel.

2. Navigate to Setup → Interface templates.

3. Click Edit on the template that needs to be tracked.

Googla Analytics for Deafult Flows_Interface templates_1.png

1. In the Head Information area → Meta & CSS, paste the Google Tag Manager code for your account at the end of the existing code in that section. An example of the Google Tag Manager code is shown below:

GTM head snippet

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Example of the GTM snippet for the tag:

GTM body snippet

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Place one snippet in the and the other in the of your website (if not already present). More info: https://developers.google.com/tag-manager/quickstart

Install GTM

Sending MyOrder Data to Google Analytics 4

By default, the myOrder object is available only for orders with payments authorized instantly (e.g., credit cards, PayPal) after successful authorization. To have the myOrder object available for all placed orders regardless of payment status (useful to send revenue for offline payment methods), enable the setting below.

1

Enable myOrder for all placed orders

1. Log in to your Control Panel: https://secure.2checkout.com/cpanel

2. Go to Setup → Ordering Options.

3. Scroll to the After sale message area and check Show message for all placed orders.

web analytics in Merchant Control Panel_2.png

1. Click Save settings at the bottom of the page.

2

Make myOrder/analytics visible in Merchant Control Panel

1. Log in to your Control Panel: https://secure.2checkout.com/cpanel

2. Navigate to Setup → Ordering Options and click the Analytics tab.

web analytics in Merchant Control Panel_1.png

1. Scroll to the Tracking script section (https://secure.2checkout.com/cpanel/web_analytics.php) and add a code snippet (for example add).

2. Apply the code to all languages or only to languages you want tracked.

3. Click Save at the bottom of the page.

web analytics in Merchant Control Panel_3.png

A JavaScript object called myOrder is available on the Thank you page and provides information about purchased products (ID, quantity, name, price, etc.).

Google Tag Manager Configuration for Google Analytics 4

Create the Google Tag in Google Tag Manager

If you already have a Google Tag in your container that fires on all pages where GTM is added, you do not need to create a new Google Tag specifically for 2Checkout.

1

Create a Google Tag and add Measurement ID

1. In Google Tag Manager, select Google Tag from the list of predefined tags.

2. In the Tag ID section enter the Measurement ID from your Google Analytics 4 property: Admin → Data Streams → select your website property → copy Measurement ID.

Google tag

Example where Measurement ID is located:

Google_Analytics_4_tag_2.png

2

Configure fields and trigger

1. Under Fields to set, add:

   • Field Name: cookie_flags

   • Value: SameSite=None;Secure

2. For Triggering, select All Pages.

All pages

Send eCommerce information to Google Analytics 4 from the 2Checkout shopping cart

2Checkout shopping carts include a dataLayer with eCommerce information for Google Analytics 4. You can inspect it by typing dataLayer into the browser console and checking the gtag4 object for eCommerce info at checkout and on the order Finish page.

Google_Analytics_4_tag_4.png

Configure Data Layer variables and create the GA4 event tag as follows.

1

Create Data Layer variables in GTM

Create the following User-Defined variables in Google Tag Manager (each variable is a Data Layer Variable, Data Layer Version = Version 2):

• gtag4.event

• gtag4.currency

• gtag4.items

• gtag4.tax

• gtag4.transaction_id

• gtag4.value

For each variable:

• Variable Type: Data Layer Variable

• Data Layer Variable Name: (use the exact name above)

• Data Layer Version: Version 2

Example screenshots:

2

Create GA4 event tag to send eCommerce data

1. Create a new tag named: Google Analytics GA4 – 2 checkout event.

   • Tag Type: Google Analytics: GA4 event

   • Measurement ID: add the measurement ID for the GA4 property (usually same as the Google Tag). After adding it you'll see "Google Tag found in this container".

   • Event Name: use the previously configured variable gtag4.event (insert as {{gtag4.event}}).

2. Under Event Parameters, add these parameters and assign each the corresponding variable:

   • items → {{gtag4.items}}

   • currency → {{gtag4.currency}}

   • transaction_id → {{gtag4.transaction_id}}

   • value → {{gtag4.value}}

   • tax → {{gtag4.tax}}

Example properties screenshot:

3

Create trigger and publish

1. Under Triggering, create a trigger named: 2checkout Event.

   • Trigger Type: Custom Event

   • Event name: 2checkout event

   • This trigger fires on: All Custom Events

1. Click Save and then Submit to Publish your container changes.

Test your integration

1

1. Place an order in the 2Checkout shopping cart using the template that has your GTM code.

2

1. Log in to your Google Analytics 4 account.

3

1. Navigate to Monetization → Ecommerce purchases.

gtag4_9.png

4

1. Review purchases and revenue for your products in GA4.

gtag4_10.png