GA4: Ecommerce dataLayer

## Goal
Update the existing checkout and transaction dataLayers to include the new GA4 dataLayer syntax. We will be parallel tracking ecommerce events into both Universal GA and GA4 until EOY '22, which is why we need both dataLayer events. 

New dimensions: 
1. Recently, the namespace id was passed into dimension 36 for each transaction. This will be `item_category3` within the GA4 dataLayer. 
2. Users can reach the Checkout page from about.gitlab.com/pricing/ or gitlab.com (group billing section). We need to distinguish where the user came from. Adding the referrer (previous page's hostname) into a new variable would allow us to see the marketing site's impact on users entering checkout. This will be `item_category4` within the GA4 dataLayer. 

**Checkout** 

Update the existing Checkout dataLayer script to include the new GA4 syntax. Lowercase values.
```
<script>
dataLayer.push({ ecommerce: null }); 

// existing Universal GA code 
dataLayer.push({
  'event':'EECCheckout',
  'currencyCode': 'USD',
  'ecommerce': {
    'checkout':{
      'actionField': {'step': 1},
      'products': [{
        'name': 'GitLab Premium',
        [...]
      }]
    }
  }
});

// new GA4 code 
dataLayer.push({
  event: 'begin_checkout',
  ecommerce: {
    currency: 'USD',
    items: [
    {
      item_id: '[product id]', //0001 for ultimate, 0002 for premium
      item_name: '[product name]', //ultimate, premium
      item_category: '[product category]', //devops, cicd
      item_category2: '[saas or self managed]',
      item_category3: '[namespace id]', 
      item_category4: '[previous page's hostname]', //about.gitlab.com or gitlab.com
      price: [product price annual], //228.00, 1188.00
      quantity: [product amount] //1, 200
    }
    ]
  }
});
</script>
```

**Transaction**

Update the existing Transaction dataLayer script to include the new GA4 syntax. Lowercase values.
```
<script>
dataLayer.push({ ecommerce: null }); 

// existing Universal GA code
dataLayer.push({
  'event':'EECtransactionSuccess', 
  'ecommerce': {
    'currencyCode': 'USD', 
    'purchase': {
      'actionField': {
        'id': [...]   
      },
      'products': [{                            
        [...]
       }]
    }
  }
});
    
// new GA4 code
dataLayer.push({  
  event: 'purchase', 
  ecommerce: {
    transaction_id: '[transaction id]',
    value: [revenue],
    tax: [tax], 
    currency: 'USD',
    items: [{
      item_id: '[product id]', //0001 for ultimate, 0002 for premium
      item_name: '[product name]', //ultimate, premium
      item_category: '[product category]', //devops, cicd
      item_category2: '[saas or self managed]',
      item_category3: '[namespace id]', 
      item_category4: '[previous page's hostname]', //about.gitlab.com or gitlab.com
      price: [product price annual], //228.00, 1188.00
      quantity: [product amount] //1, 200
    }]
  }
});
</script>
```


Guide: 
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce

## DCI
[DRI, Consulted, Informed](https://about.gitlab.com/handbook/people-group/directly-responsible-individuals/#dri-consulted-informed-dci)

- [ ] DRI: @dennischarukulvanich @tywilliams 
- [ ] Consulted: @mpreuss22 
- [ ] Informed: @justin.vetter 


## Requirements
What are the requirements for this request? Checklist below is an example of common requirements, please check all that apply and adjust as necessary:

- [ ] Copy writing
- [ ] Illustration
- [ ] Custom Graphics
- [ ] Research
- [x] Data / Analytics
- [ ] UX Design
- [x] Engineering

Story points: 6.0