Explain how dataLayer is instantiated on the window

[sheriffderek]

I don't have ANY Google Tag Manager experience (as of yesterday ;), and so - maybe it isn't addon specific - but I roughhoused with trying to find how to access the GTM dataLayer and wrote all sorts of messes trying to get to it.

If I hadn't just accidentally logged it, I would have kept going down this hole (which was all wrong)

    const metricsAdapters = this.get('metrics.options.metricsAdapters');

    const googleTagManager = metricsAdapters.find( function(thing) {
      return thing.name === "GoogleTagManager";
    });   
    let dataLayer = googleTagManager['dataLayer'][0];

I think that a note about how dataLayer is global - based on the way the inserted snippet instantiates is, would be helpful for people who might not expect it to work that way in an Ember environment.

What do you think?

Whereas this was pretty slick - but just felt too 'magic'

  router: service(),
  metrics: service(),

  alertGtmOfPurchase(order) {
    const purchaseInfo = {
      'event': 'Purchase',
      'transactionId': order.order_number,
      'exampleKey': 'exampleValue',
      ],
    };
    dataLayer.push(purchaseInfo);
  },

  actions: {
    placeOrder() {
      this.set('loading', true);
      this.get('order').place()
        .then( (response)=> {
          this.alertGtmOfPurchase(response.order);
          this.get('router').transitionTo('checkout.order-confirmation');
        })
        .catch( (response)=> { ........