变量

标记管理器上下文中的变量是一段代码片段，它允许您通过标记和触发器检索数据。

Matomo允许您轻松地创建一个新变量。创建新变量时，请考虑将此新变量贡献给官方标签管理器插件通过创建一个拉请求。

添加一个新变量

我们将创建一个新变量，它从localStorage．

创建新变量需要使用CLI工具并执行如下命令:

$ ./console生成:tagmanager-variable

这个命令将指导你创建一个变量，并询问一些事情，如插件的名称和你想创建的变量的名称。当它要求你输入变量名时，输入“本地存储”。该命令将创建以下文件:

• 插件/ $ yourplugin /模板/变量/ LocalStorageVariable.php让您定义例如变量的类别和定义参数。
• 插件/ $ yourplugin /模板/变量/ LocalStorageVariable.web.js让您实现JavaScript逻辑来返回本地存储的值。

添加预配置的变量

预配置变量是一种特殊的变量，不需要配置，用户可以直接使用。创建一个预配置变量的方式是一样的，除了你需要执行的初始命令是不同的:

$ ./console生成:tagmanager-preconfigured-variable

定义变量的名称、描述和帮助

当您生成一个变量时，生成器将自动创建一些变量翻译键在你的插件/ $ yourplugin / lang / en.json文件。你可能想要调整创建的键的翻译:

"LocalStorageVariableName": "本地存储"，"LocalStorageVariableDescription": "这是本地存储的描述"，"LocalStorageVariableHelp": ""

或者，还可以设置名称、描述和可选帮助文本LocalStorageVariable.php但建议使用翻译键，以便其他开发人员可以将其翻译成不同的语言。

理想情况下，描述应该保持简短。变量通常不需要帮助文本。

配置变量类别

在生成的LocalStorageVariable.php，您将发现一个名为getCategory ()．在这里，您可以定义这个变量最适合的类别。您可以从一组预定义的类别中选择，如“页面变量”，“日期”，“性能”，“SEO”和“设备”，或创建自己的类别:

公共函数getCategory(){返回self::CATEGORY_PAGE_VARIABLES;｝

在这个例子中，我们使用一个预定义的类别“Page Variables”。要使用自定义类别，只需返回您想要选择的类别的名称:

公共函数getCategory(){返回'My Category';｝

显示变量的图标

您可以选择为您的变量显示一个图标。您所需要做的就是在方法中返回图标文件的路径getIcon ()是这样的:

公共函数getIcon(){返回'plugins/TagManager/images/MyIcon.png';｝

我们建议你把图片放在图片插件的文件夹。例如，文件本身可能是ajpg，png,或svg理想大小为64x64像素的文件。

指定参数

在本例中，我们希望让用户配置该变量应返回的项的名称。为此，我们可以配置参数。参数具有相同的API插件设置．

下面是一个关于如何定义参数的示例，您可以稍后在JavaScript部分中使用该参数进行访问parameters.get(“itemName”)．

公共函数getParameters(){返回数组($this-> makessetting ('itemName'， '这是默认值'，FieldConfig::TYPE_STRING，函数(FieldConfig $field) {$field->title = '项目名称';$field->uiControl = FieldConfig::UI_CONTROL_TEXTAREA;$field->description = '请输入您想访问的本地存储项的名称。';$field->validators[] = new CharacterLength($min = 1， $max = 300);}));｝

了解更多关于指定参数在我们的专用标签管理器-参数指南。

JavaScript部分

现在我们开始开发JS部分，它将从本地存储中返回值。这是在文件中完成的LocalStorageVariable.web.js．基本结构如下所示:

(function(){返回函数(参数，TagManager) {this。得到= function () { // accessing a parameter var itemName = parameters.get('itemName'); // return variable value }; }; })();

实现的变量示例如下所示:

(function(){返回函数(参数，TagManager) {this。get = function () {var itemName = parameters.get('itemName');if (itemName && localStorage){返回localStorage. getitem (itemName);}};};}) ();

在上面的示例中，我们定义了一个匿名JavaScript类，该类实现了得到方法。每当请求变量的值时，都会执行此方法。您可以访问您所定义的任何参数参数。得到('$parameterName', optionalDefaultValueIfNoneConfigured)．

您还可以访问一些特殊的变量，如文档而且窗口通过参数对象。例如parameters.document或parameters.window．的访问parameters.document在文档推荐直接使用，因为它使单元测试更容易。你可以在TemplateParametersAPI参考。

您还可以访问TagManager实例，它提供了很多围绕DOM、窗口、url、事件、数据层等的帮助实用程序。你可以在TagManagerAPI参考。