Go to Qubit

Opentag documentation

Quick start

Opentag is just one line of JavaScript, but gives you the flexibility to add tags of any size to pages on your website.

Container tag

First up, you’ll need to create an Opentag account to get your own unique container code. You can sign up for an account for free on our registration page.

Once you’ve registered, you can get your container code by clicking the “embed” button on the “default” container:

opentagcontainer

Copy & paste the code onto one of your web pages, preferably a testing environment to start with.

Hint: Technically speaking, every Opentag container is a unique file on Qubit’s CDN, hosted on Amazon’s Cloudfront infrastructure.

Note: if you haven’t “committed” your container before, when you add the container to your site, you’ll get a 404 error. Don’t worry about this – it’ll go away once you commit (we’ll get to that).

Your first script

It is possible to add scripts in two different ways in Opentag: using the tag library, or custom scripts. We’ll go over custom scripts to begin with, but you can jump ahead to the tag library section if you like.

Little bits of JavaScript

That’s all tags are. You may recognize the snippet of code below, it’s a sample of Google’s Universal Analytics tag, used for web analytics. It’s also one of simplest tags (in its current form) that can be run on a page.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

</script>
<!-- End Google Analytics -->

Let’s use this tag as an example for adding to your container.

Adding the tag

Step 1: If you’re not already logged in, login to your Opentag account.

Step 2: Click “add new script”, then select “custom script”. You should now see a rather intimidating looking black code box.

Step 3: Copy and paste the code above into the code box.

Not a coder? Don’t worry, our tag library has got you covered. (We’ll get to that.) Still, it’s worth completing these steps anyway.

Step 4: Give your tag a name. This can be whatever you like, for example, “Google Universal Analytics testing”.

Step 5: Scroll down to the bottom of the page and click “save”.

Step 6: You should now be on the main home screen, and see this big message at the top:

notcommitted

What this means is that you’ve added the tag to the container, but those changes haven’t yet been deployed onto the site. Click commit to deploy them.

Pushing out to CDN

That’s it, the tag has been added! What happens now is the changes get “pushed out to the CDN”, a process that usually takes 5-10 minutes.

But you don’t want to wait 10 minutes to check the tag works, right? This brings us on nicely to our debug tool.

Debugging your tag

“Debugging” is quite a strong word here, all we want to do is check the tag is working correctly. To do this, you can enable our debug tool on the page where you added the container, by adding ?opentag_debug_tool=true to the URL. For example:

http://yourdomin.com?opentag_debug_tool=true

This should bring up a popup box on the right of your screen (below). You won’t have to wait 10 minutes for this, any changes you’ve made should show up in the tool instantly.

debugtool

The debug tool tells us lots of information about the tag that fired on the page, but the key thing to note is the green dot – the fact it’s green tells us the tag fired correctly.

Debugging in more depth? Check out the debug tool section for more details.

The tag library

That wasn’t too difficult, right? However, tags can get pretty complicated. Thats why we recommend using our tag library 99% of the time. The tag library is a growing list of over 800 code templates for over 200 different vendors.

How does it work?

Most of the time, vendors provide pretty much the same code to every single one of their clients. The only difference between clients is the parameters inputted to the tag (Google Profile ID, Doubleclick Cat Param etc). That’s why we have our tag library – so you don’t have to touch code, you just have to input these parameters.

Adding a tag from the library

Let’s add another tag to your container, but this time from the tag library.

Step 1: Find the tag in the library: Re-targeting > Google > Google Remarketing Conversion Async.

Click “toggle detail”, and you should see the following:

tagdetail

The highlighted parts of the code are where the parameters will be substituted.

Step 2: Input example parameters for the Google Conversion ID (e.g. 123456789) and Google Conversion Label (e.g. g4f3121uiniu321321) by clicking “add new custom variable” and inputting them as “hard coded values”.

Step 3: Name your tag, save it, and commit your container. If you re-open the debug tool on the page, you should now see both tags firing.

The Tag Library enables you to add tags to your site in far less time, as we’ve already done the heavy lifting for you!

Filters

Filters are a great way of configuring when tags should run on your site. Most of the time they’re actually pretty simple, although they can get a lot more complicated and powerful if you need them to.

Step 1: Open up one of the tags you created previously.

Step 2: Click the “advanced features” button at the bottom of the page.

Step 3: Click the “filter” tab and then click “edit” next to the “Default filter: match all” filter.

Hint: by default tags in Opentag run on every page, unless you set up filters to do otherwise.

Step 4: Add a filter for your tag. There’s lots of things you can do here, but usually a “URL contains” filter is good enough. This works by looking for a pattern in the URL, and firing the tag if it the pattern is found.

Step 5: Save the filter and tag, commit the container, and then go back to the debug tool to check the filter is working.

For example, you might enter the pattern checkout/confirmation to make a tag run on http://yourdomain.com/checkout/confirmation.

Dependencies

Dependencies are used to ensure that tags fire in a particular order. In the past you might have asked your developers simply to put one tag before the other – dependencies are just Opentag’s way of doing that.

Step 1: Open up one of your tags.

Step 2: Click the “advanced features” button at the bottom of the page.

Step 3: Click the “dependencies” tab.

Step 4: Click a script you want this tag to run after, and then click the arrow to add the dependency. It should look something like this:

dependencies

Step 5: Save your script and commit the container. You should now see the dependency reflected in the container:

dependency-container

You should also see it in the debug tool:

dependency-debug

Universal Variable

One thing we haven’t touched on is how Opentag handles dynamic parameters that change depending on the page being viewed. An example of this might be the “order id” parameter from an ecommerce transaction. A lot of tags on ecommerce sites require this parameter to be passed back after a transaction has taken place.

Heads up! This is where Opentag gets smart, we’ve left the best thing until last!

At Qubit we’ve been working with leading tech organizations to create a universal standard for data on websites, called Universal Variable (UV). UV is a JavaScript data layer in a standardized JSON structure, relating to the user journey of your visitors, including the user details, products viewed, and transactions.

What does this look like?

Below is a small example snippet of some Universal Variable code:

window.universal_variable = {
  page: {
    category: "Home"
  },
  user: {
    user_id: "1232321",
    name: "Joe Bloggs"
  }
}

How does this work with Opentag?

Because the UV is a standard format, Opentag can read from it and pass back the appropriate variable at the appropriate time. For example, if a tag required the user_id parameter above, Opentag would automatically know where to look for the data.

This is where the tag library comes into it’s own. Take a look at the Google Analytics ecommerce tracking tag in our library below. The majority of the parameters that need to be passed back are dynamic, and are read directly from Universal Variable.

opentag-uv

What does this mean for implementation?

What it means is that once you’ve coded up the data layer and added the Opentag container to your site, it’s possible to pass back dynamic data to tags without any further development work. While it is a bit of development work to begin with (~2 days), the benefits are well worth the time investment.

How do we implement UV?

Read our UV documentation for details.

All done!

That just about rounds up everything for this quick start guide. We go into a lot more depth into the individual features of Opentag in other parts of the documentation, visit the homepage for a full contents.

We’ve also got a support center for general FAQs.

Was this helpful?