@widgetsburritos/gtm-flow

    1.0.4 • Public • Published

    GTM Flow Chart Generator

    This library provides a mechanism for visually representing Google Tag Manager (GTM) containers as a flow chart, or more accurately a state diagram. This can be very helpful for more complex GTM containers.

    Usage

    1. If you don't have it already on your system, please install nodejs v8+.

    2. Install the gtm-flow package.

      npm install -g @widgetsburritos/gtm-flow
      

      Note: These instructions install the tool globally on your system. If you want to limit the scope to a particular project, drop the -g flag.

    3. Login to Google Tag Manager, go to Admin -> Container -> Export Container

    4. Click the Choose a version or workspace button and then specify the desired workspace.

    5. Click the Export button.

    6. Run the following commands to generate reports: Tag report:

      gtm-flow --type tag --infile /path/to/GTM-EXPORT-FILE.json --outfile /path/to/desired/location/report.html
      

      Trigger report:

      gtm-flow --type trigger --infile /path/to/GTM-EXPORT-FILE.json --outfile /path/to/desired/location/report.html
      
    7. Open the report file to see the specific report.

      Note: It may take a little while to load, especially if you have several triggers and tags.

    Types of Reports

    Tag Report

    Shows the trigger path into a particular tag, including blocking triggers. It provides additional context about the various filters related to each individual trigger.

    Example: Sample tag report

    Trigger Report

    Shows all tags that respond to a particular trigger, including blocking triggers.

    Example: Sample trigger report

    Disclaimers

    All diagrams are generated using Mermaid. It's not a perfect mechanism, and definitely has a few issues where lines sometimes overlap on top of of one another, or incredibly large graphs become a bit indecipherable. I've noticed this especially on the trigger reports, when a trigger points to a large quantity of tags. You mileage may vary.

    I've done a few hacky things with CSS here as well, that probably could (and should) be deferred to mermaid. I just haven't dug enough into that API to see if it is possible to do at this moment. For the time being, this report does what I need it to do. Feel free to open pull requests to extend functionality as you see fit.

    Install

    npm i @widgetsburritos/gtm-flow

    DownloadsWeekly Downloads

    0

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    373 kB

    Total Files

    13

    Last publish

    Collaborators

    • davidstinemetze