angulartics2 custom events are sent to facebook but not to google analytics

up vote
0
down vote

favorite

I use angulartics2 with an angular7 project to fire events to facebook and google analytics.

I have facebook and google analytics configured using google tag manager.

the problem is my custom events are fired and sent to facebook but not to google analytics.

below the <head> tag I have the google tag manager code.

in the main component typescript file I added the following code:

constructor(
 private angulartics2GoogleTagManager: Angulartics2GoogleTagManager,
 private angulartics2Facebook: Angulartics2Facebook,
 private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics
 ) {
 this.angulartics2Facebook.startTracking();
 this.angulartics2GoogleTagManager.startTracking();
 this.angulartics2GoogleAnalytics.startTracking();
...

for example when people add items to cart I want to fire an event about it.

so in my cart service I inject angulartics2 in the constructor:

 constructor(@Inject(LOCAL_STORAGE) private storage: StorageService,
 private angulartics2: Angulartics2
 )

and then where it's relevant I fire the event with the following code:

 this.angulartics2.eventTrack.next(action: 'addToCart', properties: category: 'Cart', label: keyName, value: quantity);

using facebook pixel chrome extension I can see that the custom event is detected, using google events chrome extension I can see that no event is detected.

what am I missing? what I didn't configure properly?

google analytics is configured properly in google tag manager, I do see users count and page views count properly.

any information regarding this issue would be greatly appreciated.

thanks

update

some more investigation information thanks to @XTOTHEL.

so in the app.component.ts constructor I only enabled google tag manager to start tracking.

unfortunately google tag manager is not detecting any events being fired.

attached a screenshot of google tag manager console after adding stuff to the cart and the angulartics2 code of adding addToCart custom event being fired.

enter image description here

update 2

tags tab for interaction addToCart

Data Layer tab for interaction AddToCart

edited Nov 10 at 15:20

asked Nov 8 at 8:32

ufk

10.4k49165289

If you've setup your tags within GTM, I don't think you would only need to use angulartics2GoogleTagmanager.startTracking(); and not the rest. Can you show a screen capture of the tags within GTM for FB and GA and the triggers associated with each?
– XTOTHEL
Nov 9 at 15:49

@XTOTHEL - i'm guessing i'm missing something... do I need to pre-configure the custom events i'm about to send with angulartics2 in the GTM admin page ? where exactly ?
– ufk
Nov 9 at 19:04

Can you show me an output of GTM’s debug console when you tigger an event?
– XTOTHEL
Nov 9 at 19:42

@XTOTHEL - updated main post. thanks
– ufk
Nov 10 at 10:42

Can you select “interaction” and show me both tags and datalayers tab?
– XTOTHEL
Nov 10 at 15:13

|
show 3 more comments

up vote
0
down vote

favorite

I use angulartics2 with an angular7 project to fire events to facebook and google analytics.

I have facebook and google analytics configured using google tag manager.

the problem is my custom events are fired and sent to facebook but not to google analytics.

below the <head> tag I have the google tag manager code.

in the main component typescript file I added the following code:

constructor(
 private angulartics2GoogleTagManager: Angulartics2GoogleTagManager,
 private angulartics2Facebook: Angulartics2Facebook,
 private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics
 ) {
 this.angulartics2Facebook.startTracking();
 this.angulartics2GoogleTagManager.startTracking();
 this.angulartics2GoogleAnalytics.startTracking();
...

for example when people add items to cart I want to fire an event about it.

so in my cart service I inject angulartics2 in the constructor:

 constructor(@Inject(LOCAL_STORAGE) private storage: StorageService,
 private angulartics2: Angulartics2
 )

and then where it's relevant I fire the event with the following code:

 this.angulartics2.eventTrack.next(action: 'addToCart', properties: category: 'Cart', label: keyName, value: quantity);

using facebook pixel chrome extension I can see that the custom event is detected, using google events chrome extension I can see that no event is detected.

what am I missing? what I didn't configure properly?

google analytics is configured properly in google tag manager, I do see users count and page views count properly.

any information regarding this issue would be greatly appreciated.

thanks

update

some more investigation information thanks to @XTOTHEL.

so in the app.component.ts constructor I only enabled google tag manager to start tracking.

unfortunately google tag manager is not detecting any events being fired.

attached a screenshot of google tag manager console after adding stuff to the cart and the angulartics2 code of adding addToCart custom event being fired.

enter image description here

update 2

tags tab for interaction addToCart

Data Layer tab for interaction AddToCart

edited Nov 10 at 15:20

asked Nov 8 at 8:32

ufk

10.4k49165289

If you've setup your tags within GTM, I don't think you would only need to use angulartics2GoogleTagmanager.startTracking(); and not the rest. Can you show a screen capture of the tags within GTM for FB and GA and the triggers associated with each?
– XTOTHEL
Nov 9 at 15:49

@XTOTHEL - i'm guessing i'm missing something... do I need to pre-configure the custom events i'm about to send with angulartics2 in the GTM admin page ? where exactly ?
– ufk
Nov 9 at 19:04

Can you show me an output of GTM’s debug console when you tigger an event?
– XTOTHEL
Nov 9 at 19:42

@XTOTHEL - updated main post. thanks
– ufk
Nov 10 at 10:42

Can you select “interaction” and show me both tags and datalayers tab?
– XTOTHEL
Nov 10 at 15:13

|
show 3 more comments

up vote
0
down vote

favorite

I use angulartics2 with an angular7 project to fire events to facebook and google analytics.

I have facebook and google analytics configured using google tag manager.

the problem is my custom events are fired and sent to facebook but not to google analytics.

below the <head> tag I have the google tag manager code.

in the main component typescript file I added the following code:

constructor(
 private angulartics2GoogleTagManager: Angulartics2GoogleTagManager,
 private angulartics2Facebook: Angulartics2Facebook,
 private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics
 ) {
 this.angulartics2Facebook.startTracking();
 this.angulartics2GoogleTagManager.startTracking();
 this.angulartics2GoogleAnalytics.startTracking();
...

for example when people add items to cart I want to fire an event about it.

so in my cart service I inject angulartics2 in the constructor:

 constructor(@Inject(LOCAL_STORAGE) private storage: StorageService,
 private angulartics2: Angulartics2
 )

and then where it's relevant I fire the event with the following code:

 this.angulartics2.eventTrack.next(action: 'addToCart', properties: category: 'Cart', label: keyName, value: quantity);

using facebook pixel chrome extension I can see that the custom event is detected, using google events chrome extension I can see that no event is detected.

what am I missing? what I didn't configure properly?

google analytics is configured properly in google tag manager, I do see users count and page views count properly.

any information regarding this issue would be greatly appreciated.

thanks

update

some more investigation information thanks to @XTOTHEL.

so in the app.component.ts constructor I only enabled google tag manager to start tracking.

unfortunately google tag manager is not detecting any events being fired.

attached a screenshot of google tag manager console after adding stuff to the cart and the angulartics2 code of adding addToCart custom event being fired.

enter image description here

update 2

tags tab for interaction addToCart

Data Layer tab for interaction AddToCart

edited Nov 10 at 15:20

asked Nov 8 at 8:32

ufk

10.4k49165289

I use angulartics2 with an angular7 project to fire events to facebook and google analytics.

I have facebook and google analytics configured using google tag manager.

the problem is my custom events are fired and sent to facebook but not to google analytics.

below the <head> tag I have the google tag manager code.

in the main component typescript file I added the following code:

constructor(
 private angulartics2GoogleTagManager: Angulartics2GoogleTagManager,
 private angulartics2Facebook: Angulartics2Facebook,
 private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics
 ) {
 this.angulartics2Facebook.startTracking();
 this.angulartics2GoogleTagManager.startTracking();
 this.angulartics2GoogleAnalytics.startTracking();
...

for example when people add items to cart I want to fire an event about it.

so in my cart service I inject angulartics2 in the constructor:

 constructor(@Inject(LOCAL_STORAGE) private storage: StorageService,
 private angulartics2: Angulartics2
 )

and then where it's relevant I fire the event with the following code:

 this.angulartics2.eventTrack.next(action: 'addToCart', properties: category: 'Cart', label: keyName, value: quantity);

using facebook pixel chrome extension I can see that the custom event is detected, using google events chrome extension I can see that no event is detected.

what am I missing? what I didn't configure properly?

google analytics is configured properly in google tag manager, I do see users count and page views count properly.

any information regarding this issue would be greatly appreciated.

thanks

update

some more investigation information thanks to @XTOTHEL.

so in the app.component.ts constructor I only enabled google tag manager to start tracking.

unfortunately google tag manager is not detecting any events being fired.

attached a screenshot of google tag manager console after adding stuff to the cart and the angulartics2 code of adding addToCart custom event being fired.

enter image description here

update 2

tags tab for interaction addToCart

Data Layer tab for interaction AddToCart

angular google-analytics google-tag-manager angulartics2

edited Nov 10 at 15:20

asked Nov 8 at 8:32

ufk

10.4k49165289

edited Nov 10 at 15:20

asked Nov 8 at 8:32

ufk

10.4k49165289

edited Nov 10 at 15:20

asked Nov 8 at 8:32

ufk

10.4k49165289

asked Nov 8 at 8:32

ufk

10.4k49165289

asked Nov 8 at 8:32

ufk

10.4k49165289

If you've setup your tags within GTM, I don't think you would only need to use angulartics2GoogleTagmanager.startTracking(); and not the rest. Can you show a screen capture of the tags within GTM for FB and GA and the triggers associated with each?
– XTOTHEL
Nov 9 at 15:49

@XTOTHEL - i'm guessing i'm missing something... do I need to pre-configure the custom events i'm about to send with angulartics2 in the GTM admin page ? where exactly ?
– ufk
Nov 9 at 19:04

Can you show me an output of GTM’s debug console when you tigger an event?
– XTOTHEL
Nov 9 at 19:42

@XTOTHEL - updated main post. thanks
– ufk
Nov 10 at 10:42

Can you select “interaction” and show me both tags and datalayers tab?
– XTOTHEL
Nov 10 at 15:13

|
show 3 more comments

If you've setup your tags within GTM, I don't think you would only need to use angulartics2GoogleTagmanager.startTracking(); and not the rest. Can you show a screen capture of the tags within GTM for FB and GA and the triggers associated with each?
– XTOTHEL
Nov 9 at 15:49

@XTOTHEL - i'm guessing i'm missing something... do I need to pre-configure the custom events i'm about to send with angulartics2 in the GTM admin page ? where exactly ?
– ufk
Nov 9 at 19:04

Can you show me an output of GTM’s debug console when you tigger an event?
– XTOTHEL
Nov 9 at 19:42

@XTOTHEL - updated main post. thanks
– ufk
Nov 10 at 10:42

Can you select “interaction” and show me both tags and datalayers tab?
– XTOTHEL
Nov 10 at 15:13

If you've setup your tags within GTM, I don't think you would only need to use angulartics2GoogleTagmanager.startTracking(); and not the rest. Can you show a screen capture of the tags within GTM for FB and GA and the triggers associated with each?
– XTOTHEL
Nov 9 at 15:49

@XTOTHEL - i'm guessing i'm missing something... do I need to pre-configure the custom events i'm about to send with angulartics2 in the GTM admin page ? where exactly ?
– ufk
Nov 9 at 19:04

Can you show me an output of GTM’s debug console when you tigger an event?
– XTOTHEL
Nov 9 at 19:42

@XTOTHEL - updated main post. thanks
– ufk
Nov 10 at 10:42

Can you select “interaction” and show me both tags and datalayers tab?
– XTOTHEL
Nov 10 at 15:13

|
show 3 more comments

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53203973%2fangulartics2-custom-events-are-sent-to-facebook-but-not-to-google-analytics%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj

angulartics2 custom events are sent to facebook but not to google analytics

update

update 2

update

update 2

update

update 2

update

update 2

Your Answer

Post as a guest

Post as a guest

這個網誌中的熱門文章

How to read a connectionString WITH PROVIDER in .NET Core?

Node.js Script on GitHub Pages or Amazon S3

Museum of Modern and Contemporary Art of Trento and Rovereto

angulartics2 custom events are sent to facebook but not to google analytics

update

update 2

update

update 2

update

update 2

update

update 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

這個網誌中的熱門文章

How to read a connectionString WITH PROVIDER in .NET Core?

Node.js Script on GitHub Pages or Amazon S3

Museum of Modern and Contemporary Art of Trento and Rovereto