Durant notre phase de croissance l’installation, la configuration et le changement de partenaires marketing sont régulièrement venus perturber nos équipes de développement.

Régulièrement nous devions bousculer nos roadmaps pour déployer de nouvelles fonctionnalités correspondant à des besoins marketing : Affiliation, Marketing ciblé, Calcul de recommandations… Dans les fait, chacune de ces nouvelles fonctionalités correspondaient à des appel de scripts tiers.

Pour éviter de devoir continuellement repasser par des phases de production de code et de déploiement de ces modifications, nous avons choisi de déléguer cette gestion de nos scripts à TagCommander.

TagCommander Bundle pour Symfony >=2.3.*

Packagist Packagist Build Status

Pour encore plus nous faciliter la vie dans la gestion de nos Containers et de notre Datalayer dans notre application Symfony, nous avons développé un bundle pour intégrer TagCommander.

Ce bundle nous permet de configurer TagCommander facilement en fonction de nos différents environnements. De pouvoir manipuler le Datalayer de TagCommander directement depuis Symfony. Ou encore de pouvoir suivre le contenu de ce dernier depuis le profiler de nos applications.

TagCommander-Bundle dans le Profiler de Symfony

Il prévoit également les fonctions Twig nécessaires pour afficher ce même Datalayer dans des pages web ainsi que d’autres fonctions pour afficher différents Containers ou encore, des Events.

Le service tc_datalayer

Pour commencer, tagcommander-bundle expose un service nommé tc_datalyer qui n’est autre que votre Datalyer lui-même, manipulable depuis votre application Symfony.

Il s’agit d’un objet de type ParameterBag réutilisé depuis le composant d’injection de dépendance de Symfony.

1
2
3
4
5
6
7
8
9
10
<?php
# src/ApppBundle/Controller/DefaultController.php

/* ... */
    public function indexAction(Request $request)
    {
        $this->get('tc_datalayer')->set('foo', 'bar');

        return $this->render('default/index.html.twig');
    }

Vous pourrez l’utiliser partout pour renseigner de nouvelles données dans votre Datalayer. Cependant il est conseillé de le faire avant que votre moteur de rendu (Twig) ne génère vos pages html. Même si c’est déconseillé, vous pourrez également le faire dans vos templates Twig avec la fonction tc_vars.

Par défaut, vous pouvez lui indiquez des valeurs directement depuis la configuration de votre projet. Comme c’est le cas dans l’exemple suivant :

meup_tagcommander:
    datalayer:
        name:    "tc_vars"
        default: { env: "%kernel.environment%", locale: "%locale%" }

Les fonctions Twig utiles

La fonction tc_vars()

Comme l’indique la documentation d’installation du bundle, la première des fonctions twig dont vous aurez besoin sera tc_vars. Elle retourne les données de votre Datalayer sérialisées et permet de les rendre disponibles en JavaScript dans vos pages.

En argument, vous pouvez lui passer un tableau pour compléter ou écraser des valeurs de votre Datalayer.

{# app/Resources/views/base.html.twig #}

{% block head_javascript %}
    {{ tc_vars({ 'foo': 'bar', 'route': app.request.attributes.get('_route') }) }}
{% endblock %}

La fonction tc_container()

La fonction tc_container vous permet de faire appel à un conteneur de tags dans votre template en lui passant son nom en paramètre.

{# app/Resources/views/base.html.twig #}

{% block javascripts %}
    {{ tc_container("generic") }}
{% endblock %}

C’est dans la configuration de votre projet que vous pouvez définir chacun des containeurs de tags que vous souhaitez utiliser et où ces derniers sont-il disponibles.

meup_tagcommander:
    containers:
        - { name: "generic", script: "http//cdn.somewhere.com/my-generic-container.js" }

La fonction tc_event()

Enfin ce bundle expose une fonction Twig tc_event que vous pouvez utiliser pour faire appel au script pour tracker des évènements via vos Containers de tags comme dans l’exemple ci-dessous :

    <a href="#" onclick="javascript: return {{ tc_event('lorem_click') }}">lorem ipsum</a>
    <img src="sample.jpg" onmouseover="javascript: return {{ tc_event('over_image', {'src': 'sample.jpg'}, 'other_events') }}">

Contrairement à l’extension chrome que vous propose TagCommander, vous pouvez suivre le nombre des évènements installés sur vos pages depuis la debug-toolbar de votre application Symfony.

TagCommander-Bundle dans la debug toolbar de Symfony


Auteur

methylbro

methylbro  (@methylbro)

Thomas Gasc, développeur.

« Everyone Can Cook »

Ratatouille, Pixar, 2007