2017/10/07

Craft CMS: Control your tracking codes from the control panel

We launch a new website and shortly before we go online the question comes up if the Google Analytics code is implemented. Not a problem at all but usually it’s not just the Google Analytics tracking code. Maybe you need services like Hotjar or something else. It would be nice to include codes from services like this without touching the code itself. Here is a solution.

What we need:

SuperTable Plugin from Engram Design
The Architect from Pennebaker

Let’s create our fields

We control this in the Globals. We just need a SuperTable field with three subfields.

Snippet Name: Not important just to show the User in the CP what code it is without searching within the code itself.
Snippet Status: To active / deactivate the Code
Snippet Code: The code itself

Here is the Code to create the Fields:

      
        {
    "groups": [
        "Globals"
    ],
    "fields": [
        {
            "group": "Globals",
            "name": "Global: Third Party Snippets",
            "handle": "globalThirdPartySnippets",
            "instructions": "",
            "required": false,
            "type": "SuperTable",
            "typesettings": {
                "fieldLayout": "row",
                "staticField": null,
                "selectionLabel": "Add a row",
                "maxRows": null,
                "minRows": null,
                "blockTypes": {
                    "new": {
                        "fields": {
                            "new1": {
                                "name": "Snippet Name",
                                "handle": "snippetName",
                                "instructions": "",
                                "required": 1,
                                "type": "PlainText",
                                "width": "",
                                "typesettings": {
                                    "placeholder": "",
                                    "maxLength": "",
                                    "multiline": "",
                                    "initialRows": 4
                                }
                            },
                            "new2": {
                                "name": "Snippet Status",
                                "handle": "snippetStatus",
                                "instructions": "",
                                "required": 0,
                                "type": "Lightswitch",
                                "width": "",
                                "typesettings": {
                                    "default": ""
                                }
                            },
                            "new3": {
                                "name": "Snippet Code",
                                "handle": "snippetCode",
                                "instructions": "",
                                "required": 1,
                                "type": "PlainText",
                                "width": "",
                                "typesettings": {
                                    "placeholder": "",
                                    "maxLength": "",
                                    "multiline": 1,
                                    "initialRows": 8
                                }
                            }
                        }
                    }
                }
            }
        }
    ],
    "globals": [
        {
            "name": "Third Party Snippets",
            "handle": "thirdPartySnippets",
            "fieldLayout": {
                "Content": [
                    "globalThirdPartySnippets"
                ]
            }
        }
    ]
}

In short: It creates the SuperTable field and the global. You can paste this code in the „Raw Input“ Field in „The Architect“ or create it by your own when you don’t have installed The Architect Plugin.

Now it must looks like this:

Add the Twig Code

Now we must include the code for this in our twig templates. I’ve it in the _scripts.html file which is included in the footer.

Here is the snippet:

      
        {# -- Third Party Snippets -- #}
{% set thirdPartySnippets = thirdPartySnippets.globalThirdPartySnippets is defined ? thirdPartySnippets.globalThirdPartySnippets %}
{% if thirdPartySnippets %}
  {% for row in thirdPartySnippets %}
    {% if row.snippetStatus %}
      {% if row.snippetName %}
        <!-- {{ row.snippetName }} -->
      {% endif %}

      {% if row.snippetCode %}
        {{ row.snippetCode | raw }}
      {% endif %}
    {% endif %}
  {% endfor %}
{% endif %}

We simply check if the global field exists and then we loop over the content to include all the codes.