adopted-ember-addons / adopted-ember-addons/ember-metrics

Explain how dataLayer is instantiated on the window

オープン
#192 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
367
フォーク
158
PR マージ指標
30日以内にマージされた PR はありません

説明

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)=> { ........
```

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。