Google Tag Manager package

npm package

Description

Google Tag Manager allows you to quickly and easily update measurement codes and related code fragments collectively, just by adding one tracking code in your web. It’s a pretty common system to manage your website analytics.

User Stories

As a Frontity user
I want to use Google Tag Manager in my project
so that I can manage all my analytics collectively

We need to rename the package so it ends with -analytics. Either:

  • @frontity/google-tag-manager-analytics
  • @frontity/gtm-analytics

Hey, I just wanted to ask if you agree with the format of pageviews and events that are currently sending to Google Tag Manager, because I think we can improve it a bit.

// Pageview
dataLayer.push({
  event: "virtualPageview",
  pageview: {
    title: pageview.title,
    link: pageview.link,
  }
});

// Event
dataLayer.push({
  event: event.name,
  payload: event.payload
});

Well, I’m not completely sure about it. It’s true that this package uses the analytics package underneath but GTM could do more things appart from analytics stuff.

@SantosGuillamot what do you think we should do, stick with @frontity/google-tag-manager or change it for @frontity/gtm-analytics or @frontity/google-tag-manager-analytics?

As @david said, it’s true that GTM is more than analytics. But on the other hand, this package is built on top of @frontity/analytics and uses the analytics namespace (i.e. people installing this package will have to use actions.analytics.event() to send events).

I would choose @frontity/gtm-analytics then.

I would choose @frontity/google-tag-manager-analytics because, although it’s longer, it’s going to be easier to find the package while searching.

Okay, let’s use the long name. :+1:

I am testing this package but can’t seem to get events to fire. Tested both click events and all page load events. It seems the issue is that there is a default filter:

image

This event never seems to trigger so even when other events are satisfied, no tags are called.

On the variable display in the Frontity app, there are 3 _events: virtualPageview, gtm.load and gtm.dom.

On another property I have (with GTM working), I looked at the firing events:

‘The Container Loaded’ event seems to trigger the _event = gtm.js filter.

Do we need to add a custom ‘Content Loaded’ event to Frontity in order to get these to run? It seems all future tags are reliant upon having the filter _event = gtm.js passed.

Thanks for your work on this!

Could only put one image on post as a new user. Here is what it looks like when it properly fires on an external property:

Hello @ddrager, and welcome! :blush:

The @frontity/google-tag-manager package currently adds a custom event of type "virtualPageview" to the GTM’s data layer. It has the following format:

{
  event: "virtualPageview",
  pageview: {
    title: "The Beauties Of Gullfoss - Frontity Test",
    link: "/2016/the-beauties-of-gullfoss/",
  }
}

If you want to trigger tags when pageviews are sent you must use that custom event instead of All Pageviews

2020-06-22_23-07

:warning: Please, bear in mind that this package is still in beta, so the format we are using for events and pageviews could change in the future.

Thank you, worked delightfully!

dataLayer.push({
  event: event.name,
  payload: event.payload
});

I do not see an event being fired for clicks. Is that something I would be triggering from within my template?

Right now, you can send events from your theme using this in your connected components:

actions.analytics.sendEvent({ name, payload });

They’ll be pushed into the data layer with the same format you posted right before.

But you have to add it, our themes don’t send any event by default yet. :wink:

1 Like

@ddrager be aware that we don’t consider the API of the package stable yet and it’s going to change once we publish the final version of the package, which if I’m not mistaken should be in the upcoming weeks. We will post information in this thread once that happens :slightly_smiling_face:

I was thinking about changing the format we use to add events and pageviews to the data layer.

For events I think it’s just okay at it is.

For pageviews, I would change the event name to frontityPageview or only pageview, and move title and link to the root level. Something like this:

dataLayer.push({
  event: "pageview",
  title: "The Beauties Of Gullfoss - Frontity Test",
  link: "/2016/the-beauties-of-gullfoss/",
});

The idea is simply use the same properties pageviews and events already have and add an event property with the event name.

Well, I don’t think this small change is worth it though. :slightly_frowning_face:

What do you think, guys?

Why do you think so?

Because I want to finish this and not to continue with more changes! :laughing:

Anyways, what do you think about the format I proposed for pageviews? The only thing that still doesn’t seem to fit for me is the event name. Could it be something as general as "pageview"? Or should it be more Frontity-specific, like "frontityPageview"? Or something different?

Better now than later.

I think pageview is better. I like your new proposal, it looks neat :slightly_smiling_face:

The first stable version for the @frontity/google-tag-manager-analytics package is ready!

Here is a summary of the changes we did:

  • The package was renamed from @frontity/google-tag-manager to @frontity/google-tag-manager-analytics to remark that it belongs to the Frontity analytics group of packages.

  • It now uses the new version of the analytics library under the hood.

  • Settings haven’t changed, but the format used to add pageviews to the Google Tag Manager’s data layer has. Now it is as follows:

    dataLayer.push({
      event: "pageview",
      title: "The Beauties Of Gullfoss - Frontity Test",
      link: "/2016/the-beauties-of-gullfoss/",
    });
    

    Users updating this package to the new version have to update their triggers and tags in their GTM containers in order to match the new format.

    The format for other events remains the same.

2 Likes

This has been included in the latest release :tada: : Read the full Release Announcement.

3 Likes

2 posts were split to a new topic: How to integrate google tag manager analytics