Code Monkey home page Code Monkey logo

google-tag-manager's Introduction

Inpsyde Google Tag Manager

Version Status Build codecov Downloads License

Inpsyde Google Tag Manager inserts the GTM Container Code on every page of your WordPress site and writes data to the Data Layer.

Inpsyde Google Tag Manager

Documentation

Documentation can be found in readme.txt.

Requirements

  • WordPress >= 4.6.
  • PHP 8.0 or higher.

How to start development

This plugin does not include build assets and PHP-dependencies. Therefore, after loading that repository via Composer or git checkout you have to install them.

With Yarn:

yarn install && yarn build:dev

For more information, please refer to the Symfony Encore docs

Testing & Quality

To run all tests you've to install composer dev-dependencies first.

PHPCS

vendor/bin/phpcs

PHPUnit

vendor/bin/phpunit

This repository automatically generates a CodeCoverage-report into the tmp/-folder, which will not be committed.

Behat

To run Behat locally you need a running Selenium-Server. This package provides the vvo/selenium-standalone as devDependency via NPM. You can simple run npm install and start the selenium-task to have a running Selenium-Server.

For local testing you can use a behat.local.yml by copying the existing behat.yml. To run Behat locally you've to change the Behat\MinkExtension.base_url and PaulGibbs\WordpressBehatExtension.path to match your local setup.

vendor/bin/behat --config behat.local.yml

Note: Behat is testing WordPress currently as default installation with language "english".

License

This repository is a free software, and is released under the terms of the GNU General Public License version 2 or (at your option) any later version. See LICENSE for complete license.

google-tag-manager's People

Contributors

biont avatar bueltge avatar chrico avatar retrorism avatar sabali33 avatar szepeviktor avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

google-tag-manager's Issues

Add attributes to the script tag using a filter

Is your feature request related to a problem? Please describe.
Seeing how the combination GTM + UserCentrics seems to be quite common for cookie consent, I was wondering whether it would be reasonable to add a little integration to https://github.com/inpsyde/google-tag-manager to add a data-attribute to the script tag it renders. UserCentrics’ documentation asks for the following:

<script type="text/plain" data-usercentrics="Google Analytics">
(function(i,s,o,g,r,a,m){....} etc
</script>

Describe the solution you'd like
The documentation for the wp_print_inline_script_tag() suggests to use the $attributes in combination with the wp_{inline}_script_attributes filter but since there's no context being passed, I wouldn't know how we would prevent attributes added through a filter from being added to other script tags that apply those filters.
A custom filter like inpsyde-google-tag-manager.script-attributes would give developers full control over the attributes for the GTM script tag alone, with the added benefit that something like a nonce in the script tag (#7) also becomes a possibility.

Describe alternatives you've considered

  • Rolling out a custom plugin that handles all UserCentrics_ and GTM functionality is obviously not great. I think fixing it with an attributes filter is elegant and non-intrusive.

Additional context
UserCentrics docs: https://docs.usercentrics.com/#/direct-implementation-guide?id=step-2-adjust-existing-scripts

Add filters for additional Datalayers

Is your feature request related to a problem? Please describe.
I always thought that the plugin already made it possible to add data from custom sources to the dataLayer, but - unless I'm mistaken - this is not the case. So an integration that needs different entries to be added to the dataLayer needs to render its own script tag with dataLayer.push(['customKey','CustomValue']), where ideally, this happens in the same place.

Describe the solution you'd like
Two additional filters in the dataLayerProvider::boot method:

  • one for an array to provide the dataCollectors (array of dataCollectorInterfaces)
  • one for an array of settingsSpecs (array of settingsSpec arrays)
    like so:
public function boot(GoogleTagManager $plugin)
    {
        $dataLayer = $plugin->get('DataLayer');

        $dataCollectors = apply_filters(
            'inpsyde.google-tag-manager.datalayer-data-collectors',
            [
                $plugin->get('DataLayer.User.UserDataCollector'),
                $plugin->get('DataLayer.Site.SiteInfoDataCollector')
            ]
        );

        foreach ($dataCollectors as $dataCollector) {
            $dataLayer->addData($dataCollector);
        }

        if (! is_admin()) {
            return;
        }

        $factory = $plugin->get('ChriCo.Fields.ElementFactory');

        $settings = apply_filters(
            'inpsyde.google-tag-manager.datalayer-data-collector-settings-specs',
            [
                $plugin->get('DataLayer')->settingsSpec(),
                $plugin->get('DataLayer.User.UserDataCollector')->settingsSpec(),
                $plugin->get('DataLayer.Site.SiteInfoDataCollector')->settingsSpec(),
            ]
        );

        $settingsPage = $plugin->get('Settings.Page');
        foreach ($settings as $spec) {
            $settingsPage->addElement(
                $factory->create($spec),
                $spec['filters'] ?? [],
                $spec['validators'] ?? []
            );
        }
    }

This way, a plugin that wants to add a compatible dataCollector can do so and optionally can add their own settings to the GTM settings panel.

Describe alternatives you've considered

  • adding a filter to the datalayer script output (currently, only the attributes can be filtered): this may actually still be useful, but makes for a very hacky experience which seems unnecessary since all the interfaces to do this 'properly' are already provided by the plugin.
  • refactoring the entire plugin to use inpsyde/modularity and so that it becomes possible to extend the dataLayerProvider (or whatever would be the best approach in that scenario 😏)

Additional context
Annoyingly, my usecase requires a bunch of things that are almost provided by the default settings, just in a different format and wrapped inside an object.

Unwanted '>' character in the ID rendering

)( window, document, 'script', '<?= esc_js($dataLayerName); ?>', '<?= esc_js($gtmId); ?>>' );

Hi @Chrico I missed this during my tests but after deploying this on a staging environment, one of our clients pointed out that we're rendering an additional '>' which has to be due to this line. I can obviously fix it in a PR once I'm out of this meeting but maybe you're quicker 😏

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.