Add docs for GTM v4

docs/data-product-studio/snowtype/working-with-gtm/index.md

@@ -66,6 +66,13 @@ The code that Snowtype will generate is included in a `snowplow.js` file and, as
 Below you can see the steps you need to create the variable using the contents generated by Snowtype:
 ![](./images/gtm-var.gif)
 
+
+:::warning
+
+If the generated code is too large for Google Tag Manager, you can split it into multiple variables and include them in the order they are generated, or place directly into a Custom HTML tag.
+
+:::
+
 ### Naming and calling the Custom JavaScript
 
 After selecting a name for the Custom JavaScript variable, you would need to include it in a [Custom HTML](https://support.google.com/tagmanager/answer/6107167?hl=en#CustomHTML) tag so that it is executed. Depending on your Google Tag Manager setup, there are a couple, or more, places the variable can be used. An example is a type of Custom HTML tag that runs during page initialization:

docs/sources/trackers/google-tag-manager/ecommerce-tag-template/configuration/index.md

@@ -0,0 +1,98 @@
+---
+title: Ecommerce Tag Configuration
+sidebar_position: 100
+---
+
+```mdx-code-block
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+```
+
+## Ecommerce API
+
+Use the native Snowplow Ecommerce API or [transitional GA4/UA ecommerce adapter APIs](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/ecommerce/index.md#ga4ua-ecommerce-transitional-api) for existing dataLayer implementations using those formats. To get full value from the [Snowplow Ecommerce plugin](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/ecommerce/index.md) we recommend using the native API when possible.
+
+![](images/01_ecommerce_api.png)
+
+## Tracking Parameters
+
+<Tabs groupId="ecommerceAPI" queryString>
+  <TabItem value="sp" label="Snowplow Ecommerce" default>
+
+![](images/02_sp_tracking_parameters.png)
+
+#### Snowplow Ecommerce Function
+
+In this section you can select the [Snowplow Ecommerce function](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/ecommerce/index.md) to use.
+
+#### Snowplow Ecommerce Argument
+
+In this textbox you can specify the argument to the ecommerce function. This can be a Variable that evaluates to a corresponding object.
+
+#### Additional Tracking Parameters
+
+**Add Custom Context Entities**
+
+Use this table to attach [custom context entities](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/index.md#custom-context) to the Snowplow event. Each row can be set to a Google Tag Manager variable that returns an array of custom contexts to add to the event hit.
+
+**Set Custom Timestamp**
+
+Set this to a UNIX timestamp in case you want to [override the default timestamp](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/index.md#setting-the-true-timestamp) used by Snowplow.
+
+  </TabItem>
+  <TabItem value="ga4" label="GA4 Ecommerce">
+
+![](images/02_ga4_tracking_parameters.png)
+
+#### GA4 Ecommerce Function
+
+In this section you can select the [Google Analytics 4 Ecommerce function](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/ecommerce/index.md) to use.
+
+#### GA4 Ecommerce Arguments
+
+**DataLayer ecommerce**
+
+Here you can specify the dataLayer ecommerce variable to use, i.e. a variable that returns the `ecommerce` object itself.
+
+**Options object**
+
+Here you can specify a variable returning an object holding additional information for the ecommerce event (e.g. including `currency`, `finalCartValue`, `step`, etc).
+
+  </TabItem>
+  <TabItem value="ua" label="Universal Analytics Enhanced Ecommerce">
+
+![](images/02_ua_tracking_parameters.png)
+
+#### Universal Analytics Enhanced Ecommerce Function
+
+In this section you can select the [Universal Analytics Enhanced Ecommerce function](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/ecommerce/index.md) to use.
+
+#### Universal Analytics Enhanced Ecommerce Arguments
+
+**DataLayer ecommerce**
+
+Here you can specify the dataLayer ecommerce variable to use.
+
+**Options object**
+
+Here you can specify a variable returning an object holding additional information for the ecommerce event (e.g.including currency, finalCartValue, step etc).
+
+  </TabItem>
+</Tabs>
+
+## Snowplow Tracker and Ecommerce Plugin Settings
+
+![](images/04_tracker_plugin_settings.png)
+
+### Tracker Settings
+
+The Snowplow Ecommerce tag template **requires** a Snowplow Settings Variable to be setup. In this section you can select the Google Tag Manager variable of type [Snowplow Settings](/docs/sources/trackers/google-tag-manager/quick-start/index.md) to use.
+
+### Plugin Settings
+
+In this section you can select how the plugin will be added. The available options are:
+
+- **jsDelivr**: To get the plugin URL from jsDelivr CDN. Choosing this option allows you to specify the plugin version to be used.
+- **unpkg**: To get the plugin URL from unpkg CDN. Choosing this option allows you to specify the plugin version to be used.
+- **Self-hosted**: To get the plugin library from a specified URL. This option requires a [Permission](https://developers.google.com/tag-platform/tag-manager/templates/permissions) change to allow injecting the plugin script from the specified URL.
+- **Do not add**: To not add the plugin (e.g. when using a [Custom Bundle](/docs/sources/trackers/javascript-trackers/web-tracker/plugins/configuring-tracker-plugins/index.md) with the plugin already included)

docs/sources/trackers/google-tag-manager/ecommerce-tag-template/index.md

@@ -0,0 +1,33 @@
+---
+title: Ecommerce Template
+sidebar_position: 600
+---
+
+The Ecommerce Template is a separate Tag Template that can be added to your GTM workspace to track ecommerce events. This was done to keep the main Snowplow Tag Template a bit lighter, and for ease of tag management.
+
+This template implements the [Snowplow Ecommerce plugin](/docs/sources/trackers/google-tag-manager/ecommerce-tag-template/index.md) for the Snowplow JavaScript tracker and can be used alongside either [v3](/docs/sources/trackers/google-tag-manager/previous-versions/index.md) or [v4](/docs/sources/trackers/google-tag-manager/index.md) of the Snowplow tag.
+
+
+
+## Template Installation
+
+### Tag Manager Template Gallery
+
+Search for "Snowplow Ecommerce v3" in the [Tag Manager Template Gallery](https://tagmanager.google.com/gallery/#/owners/snowplow/templates/snowplow-gtm-tag-template-ecommerce-v3) and click `Add to Workspace`.
+
+### Manual Installation
+
+1. Download [template.tpl](https://github.com/snowplow/snowplow-gtm-tag-template-ecommerce-v3)
+2. Create a new Tag template in the Templates section of your GTM container
+3. Click the More Actions menu and select Import
+4. Import the `template.tpl` file downloaded in Step 1
+5. Click Save
+
+## Tag Setup
+
+With the template installed, you can now add the Snowplow Ecommerce Tag to your GTM Container.
+
+1. From the Tag tab, select `New`, then select the Snowplow Ecommerce Tag as your tag type
+2. Select your desired Trigger for the ecommerce events you want to track
+3. [Configure the Tag](/docs/sources/trackers/google-tag-manager/ecommerce-tag-template/configuration/index.md)
+4. Click Save

docs/sources/trackers/google-tag-manager/index.md

@@ -0,0 +1,29 @@
+---
+title: "Google Tag Manager"
+date: "2020-08-10"
+sidebar_position: 135
+---
+
+
+```mdx-code-block
+import Badges from '@site/src/components/Badges';
+
+<Badges badgeType="Actively Maintained"></Badges>
+```
+
+Using the Snowplow GTM custom templates you can deploy, implement, and configure the Snowplow [JavaScript tracker](/docs/sources/trackers/javascript-trackers/index.md) directly on the website using Google Tag Manager.
+
+The main Tag template that you will need to use when setting up the JavaScript Tracker v4 in GTM is available in the [Tag Manager Template Gallery](https://tagmanager.google.com/gallery/#/owners/snowplow/templates/snowplow-gtm-tag-template-v4). To setup the Snowplow v4 Tag, you will also need the Snowplow v4 Settings Variable template. The templates you will need are:
+
+1. [Snowplow v4](https://tagmanager.google.com/gallery/#/owners/snowplow/templates/snowplow-gtm-tag-template-v4):
+  Load, configure, and deploy the Snowplow JavaScript tracker library. It supports the full functionality of the JavaScript SDK.
+2. [Snowplow v4 Settings](https://tagmanager.google.com/gallery/#/owners/snowplow/templates/snowplow-gtm-variable-template-v4):
+  A variable template which can be used to easily apply a set of tracker configuration parameters to tags created with the Snowplow v4 tag template.
+
+For Ecommerce tracking, the [Snowplow Ecommerce Tag](https://github.com/snowplow/snowplow-gtm-tag-template-ecommerce-v3) is available on GitHub.
+
+```mdx-code-block
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />
+```

docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/previous-versions/index.md → docs/sources/trackers/google-tag-manager/previous-versions/index.md

@@ -1,9 +1,11 @@
 ---
 title: "Previous versions"
-sidebar_position: 3000
+sidebar_position: 1000
+sidebar_custom_props:
+  outdated: true
 ---
 
-In this section you can find out more about the Google Tag Manager custom templates for deploying the previous (v2) version of the Snowplow JavaScript tracker.
+In this section you can find out more about the Google Tag Manager custom templates for deploying the previous (v2/v3) versions of the Snowplow JavaScript tracker.
 
 ```mdx-code-block
 import DocCardList from '@theme/DocCardList';

docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/previous-versions/template-for-javascript-tracker-v2/index.md → docs/sources/trackers/google-tag-manager/previous-versions/template-for-javascript-tracker-v2/index.md

@@ -1,5 +1,5 @@
 ---
-title: "Template for JavaScript Tracker v2"
+title: v2
 date: "2021-11-18"
 sidebar_position: 1000
 ---

docs/sources/trackers/google-tag-manager/previous-versions/v3/index.md

@@ -0,0 +1,4 @@
+---
+title: v3
+sidebar_position: 0
+---

docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/v3-settings-variable/index.md → docs/sources/trackers/google-tag-manager/previous-versions/v3/v3-settings-variable/index.md

@@ -33,7 +33,7 @@ This means that a tracker configuration is applied **only once** to the tracker.
 
 ### Collector Endpoint Hostname
 
-This needs to be set to the hostname/domain (e.g. `sp.domain.com`) on which you’ve [configured](/docs/pipeline/collector/index.md) your Snowplow Collector.
+This needs to be set to the hostname/domain (e.g. `sp.domain.com`) on which you’ve configured your [Snowplow Collector](/docs/pipeline/collector/index.md).
 
 ## Acknowledgements
 

docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/v3-tags/ecommerce-tag-template/ecommerce-tag-configuration/index.md → docs/sources/trackers/google-tag-manager/previous-versions/v3/v3-tags/ecommerce-tag-template/ecommerce-tag-configuration/index.md

@@ -86,7 +86,7 @@ Here you can specify a variable returning an object holding additional informati
 
 ### Tracker Settings
 
-The Snowplow v3 Ecommerce tag template **requires** a Snowplow v3 Settings Variable to be setup. In this section you can select the Google Tag Manager variable of type [Snowplow v3 Settings](/docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/v3-settings-variable/index.md) to use.
+The Snowplow v3 Ecommerce tag template **requires** a Snowplow v3 Settings Variable to be setup. In this section you can select the Google Tag Manager variable of type [Snowplow v3 Settings](/docs/sources/trackers/google-tag-manager/previous-versions/v3/v3-settings-variable/index.md) to use.
 
 ### Plugin Settings
 

docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/v3-tags/ecommerce-tag-template/index.md → docs/sources/trackers/google-tag-manager/previous-versions/v3/v3-tags/ecommerce-tag-template/index.md

@@ -3,13 +3,13 @@ title: "Snowplow v3 Ecommerce"
 sidebar_position: 2000
 ---
 
-This template implements the [Snowplow Ecommerce plugin](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/ecommerce/index.md) for the Snowplow JavaScript tracker v3 and is meant to be used alongside [the main Snowplow v3 tag template](/docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/v3-tags/tag-template-guide/index.md).
+This template implements the [Snowplow Ecommerce plugin](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/ecommerce/index.md) for the Snowplow JavaScript tracker v3 and is meant to be used alongside [the main Snowplow v3 tag template](/docs/sources/trackers/google-tag-manager/previous-versions/v3/v3-tags/tag-template-guide/index.md).
 
 ## Template Installation
 
 ### Tag Manager Gallery
 
-_Coming soon._
+https://tagmanager.google.com/gallery/#/owners/snowplow/templates/snowplow-gtm-tag-template-ecommerce-v3
 
 ### Manual Installation
 
@@ -21,7 +21,6 @@ To manually install the tag template:
 4. Import the `template.tpl` file downloaded in Step 1
 5. Click Save
 
-
 ## Tag Setup
 
 With the template installed, you can now add the Snowplow v3 Ecommerce Tag to your GTM Container.

docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/v3-tags/tag-template-guide/index.md → docs/sources/trackers/google-tag-manager/previous-versions/v3/v3-tags/index.md

@@ -1,70 +1,15 @@
 ---
-title: "Snowplow v3"
-date: "2021-11-18"
-sidebar_position: 100
+title: "Snowplow v3 Tags"
+sidebar_position: 1000
 ---
 
-This template implements the [Snowplow JavaScript tracker v3](/docs/sources/trackers/javascript-trackers/index.md).
+Snowplow provides the following custom GTM Tag templates to use:
 
-The template supports all the features of the tracker, with a few exceptions due to the limitations of custom templates’ [sandboxed JavaScript](https://developers.google.com/tag-platform/tag-manager/templates/sandboxed-javascript).
+```mdx-code-block
+import DocCardList from '@theme/DocCardList';
 
-## Install the template
-
-To **install the template**, browse to **Templates** in the Google Tag Manager user interface.
-
-Under **Tag Templates**, click **Search Gallery**, and type `Snowplow v3` into the gallery overlay search bar.
-
-![search Snowplow v3 in GTM gallery](images/search_snowplow_v3.png)
-
-Click the **Snowplow v3** template name, and then click **Add to Workspace** in the next screen. Review the permissions and click **Add** to finalize the import.
-
-After importing the template, you can follow the normal process of creating a **new tag** in Google Tag Manager, and the **Snowplow v3** template will be listed among the **Custom** tag types you can choose from.
-
-## Caveats
-
-To begin with, some of the caveats of using the Custom Template.
-
-- Any methods that require the parsing of HTML elements (e.g. link tracking filter functions, cross domain linking) will not work and are thus disabled.
-- Automatic error tracking does not work due to lack of support for the `ErrorEvent` API.
-- There is no implementation for the [standard ecommerce](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/index.md#ecommerce-tracking) events. Users are encouraged to implement the [enhanced ecommerce](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/index.md#enhanced-ecommerce-tracking) setup instead.
-
-## Instructions
-
-Here are basic instructions for how to instrument the JavaScript tracker v3.
-
-In general, when the tag fires, it first checks if the Snowplow JavaScript library has been loaded from the self-hosted URL provided in the template settings (more on this below). Then, the tag checks whether a tracker with the given **Tracker Name** has already been initialized. If not, it proceeds to initialize the new tracker.
-
-Finally, the tag bundles a **command** from the settings in the tag, and sends it to the given **Collector Endpoint**.
-
-### Settings Configuration
-
-The Tag template requires a [Snowplow v3 Settings](/docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/v3-settings-variable/index.md) Variable template to be configured which can be referenced within the Tag. This settings template contains the information required for the Tag to appropriately initialize the tracker.
-
-Once a settings variable has been configured, it can be attached to the Tag in the **Tracker Initialisation** section.
-
-![tracker initialization](images/tracker_initialization.png)
-
-You can also choose to override some of the parameters specifically for this tag if you wish to, such as the Tracker Name or the Collector Endpoint.
-
-#### Self Hosted JavaScript Tracker
-
-If you have the Snowplow library [self-hosted](/docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/hosting-the-javascript-tracker/index.md), and have configured it as such in your Settings variable, you need to update the **Injects Scripts** permission to reflect the new location, by editing the **Snowplow Analytics v3 Tag template**. Delete the content of the **Allowed URL Match Patterns** field, and type the full URL to the library there. Again, it must match what you input into the tag itself when creating it.
-
-![modifying permissions](images/modifying_permissions.png)
-
-Modifying permissions **breaks the gallery link** and you will no longer be notified about updates to the template.
-
-![modifying permissions breaks gallery link](images/modifying_breaks_gallery_link.png)
-
-:::note
-
-Since v1.1.0, an alternative to prevent breaking the gallery update link is to use the `Do not load` option from the corresponding drop down menu:
-
-![library host drop down 'Do not load' option](images/host_drop_down_no_load.png)
-
-Using this option means that the Snowplow v3 Tag will not inject the Snowplow JavaScript Tracker library on the page and can be used **only** when the Tracker Snippet is loaded with another technique, e.g. directly on the page or through another GTM tag. (This is also supported as a configuration option since v1.2.0 of the [Snowplow v3 Settings](/docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/v3-settings-variable/index.md) Variable.)
-
-:::
+<DocCardList />
+```
 
 ### Tag Type
 
@@ -116,7 +61,7 @@ If you choose the first, the template will look into the `dataLayer` structure f
 
 If you selected **Choose Variable**, you need to provide a GTM variable that returns an object in the correct, expected format.
 
-For Google Analytics 4 compatible ecommerce tracking, see the dedicated [Snowplow v3 Ecommerce Tag](/docs/sources/trackers/javascript-trackers/web-tracker/tracker-setup/google-tag-manager-custom-template/v3-tags/ecommerce-tag-template/index.md) template instead.
+For Google Analytics 4 compatible ecommerce tracking, see the dedicated [Snowplow v3 Ecommerce Tag](/docs/sources/trackers/google-tag-manager/previous-versions/v3/v3-tags/ecommerce-tag-template/index.md) template instead.
 
 ##### Form Tracking
 
@@ -175,7 +120,3 @@ Using the **Context Entities** table allows you to attach [custom context entiti
 #### Set Custom Timestamp
 
 You can also choose to [set the True Timestamp](/docs/sources/trackers/javascript-trackers/web-tracker/tracking-events/index.md#setting-the-true-timestamp) with this field. The format must be UNIX time in milliseconds.
-
-## Acknowledgements
-
-Thanks to [Simo Ahava](https://www.simoahava.com/) for building the initial release of this template.