Tealium Tag Manager Integration with Sitecore Part-2

Posted 10/03/2016 by Yogeshwer Sharma

Here is the part 2 of how we implemented Tealium Tag Manager Integration in Sitecore. If you haven't read part 1 yet, you can catch up  here. In part 1 we have discussed Tealium's features and created fields in Sitecore to integrate it with Sitecore.

In this part we will read values from Sitecore fields and create the jquery which is used to call Tealium into our Site and provide a medium to use Tealium features in the website.

To use the Tealium manager first we need to create account on Tealium which we will discuss in our next post. With the help of few API’s we can use Tealium features on our Site.

First I have created a config file which will handle the ItemID of Setting Item which we have created in Sitecore and the JS format which is used to connect to Tealium. 

I have already shared that config file in part 1 you can see it here.

I have created a class with name TealiumManager and in that class I read the fields values from Sitecore and setting item from config. Which we are using to connect with Tealium.

Below is the API which create JS reference for Tealium connection  - 

private const string head = "";
public string TealiumUtag
        {
            get
            {
                string setting = Settings.GetSetting("Tealium.Utag.Sync.Js.UriFormat", string.Empty);
                AssertSettingSpecified(setting, "Tealium.Utag.Sync.Js.UriFormat");
                return setting;
            }
        }

        protected string GenerateHeadScriptFormat()
        {
			
			Database masterDb = Sitecore.Configuration.Factory.GetDatabase("master");
			Item settingsItem = masterDb.GetItem(Templates.FieldIDs.TealiumSettings.Item);
			
            this.Enable = settingsItem.Fields[“Enable Field Name/Field ID”].Value == Templates.Options.Enabled.ToString();
            this.Account = settingsItem.Fields[“Account Field Name/Field ID”].Value;
            this.Profile = settingsItem.Fields[“Profile Field Name/Field ID”].Value;
            this.Environment = settingsItem.Fields[“Environment Field Name/Field ID”].Value;
            this.EnableUtagSyncJs = settingsItem.Fields[“EnableUtagSyncJs Field Name/Field ID].GetBoolValue();
            return $"";
        }

        public virtual IHtmlString HeadInjections()
        {
            return new HtmlString(this.GenerateHeadScriptFormat());
        }

After creating this class, I created a view rendering in the project folder with the below code.


@using Sitecore.Mvc
@using Sitecore.Foundation.SitecoreExtensions.Extensions
@using Sitecore.Feature.Tealium
@{ var tealiumManager = new Sitecore.Feature.Tealium.Models.TealiumManager();}

@tealiumManager.HeadInjections()

The last step of implementation is using this view rendering..

The view will render JS references into layout with settings we provided from Sitecore. 

<script type='text/javascript' src='//tags.tiqcdn.com/utag/[Account Name]/[Profile]/[Environment Name]/utag.sync.js'></script>


In the above js reference you can see the following properties:

  • Account name  -  Tealium account name
  • Profile - Tealium profile name
  • Environment Name - Environment name (i.e. prod/qa/dev)

In the next post we will cover a complete overview of the Tealium Dashboard and how we can add or manage Tealium features there. 

Share:

Archive

Syndication