AdTest

This document provides a simple and straightforward description of how to work in the repository (developers), and how the app works. There are some details to bear in mind about the project and what it's expected from the same. If any piece of code that may cause any problem is found, the same should be reported.

If you are encouraged to fix it, please submit a pull request with the changes.

---

Project Repository (Developers Only)

This is a Symfony Project based on the Symfony-Starter Project.

• Clone your fork in order to work over it, if you haven't forked the repository yet, just fork it.

• If you are already using the IP address set in the project, you can change it in the file VagrantFile, in same way you can do with the hostname, don't forget that you should not commit these updates.

• Create the file git_config.pp in the puppet/manifests/ directory. You can use puppet/manifests/git_config.pp.dist as reference.

• Add the hostname to your computer (use the configured IP in the Vagrantfile).

• Start vagrant vagrant up from the root of this repo.

• Login to the virtual machine vagrant ssh from the root of this repo.

• Add the SSH Keys provided in /vagrant/ssh-keys/ to /home/vagrant/.ssh/ in order to be able to install the HarrenOAuthBundle from Gitlab. Be sure that private key file has the proper permissions set (aka: 600)

• Go to /vagrant/project directory.

• Configure your parameters.yml file. You can use app/config/parameters.yml.dist as reference.

• Run composer install to install the vendors. You can install more vendors if you want, if you do it! You should run composer update in order to update them.

• Run the required app/console commands:

  app/console assets:install --symlink web

  app/console assetic:dump

Heads Up!

For Development Environments, the Project must Log In through the /fake-server/ in order to get the OAuth Token and Credentials. Right now it's made in Nodejs and CoffeeScript, therefore you need those settings in your localhost. In the future, we intend to do this via Puppet, but momentarily it should be like that. Apologize for that! :-P)

Use Case (User Guide)

Login

As first instance all you need to do is going to Harrenmedia's Login Service in order to authenticate your credentials, this step is always required if you've been allowed to use a Harrenmedia's App. If you don't remember the url, just click on this link.

App List

Once you’ve passed the login, you’ll be redirected straight to your available apps, then you will see something like this:

App Layout

Just click on the app you want to access, in this case, click on the AdTest app. Once you are inside the AdTest app, you'll see the main template which momentarily has testing descriptions, in the following picture the main sections are marked in red, those you must take as reference, then you'll see something like:

URL List

The Url list section contains all the available urls, each url is generated in order to watch the ad you added through the upload form. If you want to watch them, just click on that button, then you will be redirected to that section.

Creative Manager

As you can see in the picture above none url has been generated yet. So let’s generate one!

Click on the second button marked you watched in previous picture “Creatives”, then you'll be redirected to the Creative Manager on it which you may add a new creative.

The Creative Manager will ask you for three fundamental fields, those fields are:

Type: This field gets the type for each creative you want to test, you just need to choose the kind of creative you want to add.

Size: This field gets the size for each creative you want to test, this size is related to the creative type you chose before, of course! You won’t have trouble with standard sizes, but if your creative does not support the chosen size, perhaps this one won’t be displayed in the testing template.

Source Code: This field is text field and it’s ready to get an HTML content type. It means that you can insert any HTML tag in any format, for example HTML script tag, HTML iframe tag, etc. The only one thing you should do is just copy and paste your code here!

For our pilot test, let's add a floating ad. It means you will choose:

Type: floating

Size: 300x250 (In this case!)

Source Code:

<script type="text/javascript" src="http://ad.static1.harrenmedia.com/libs/floating/1.1.3/floating-ad.min.js"></script>
<script type="text/javascript">
    withJquery(function () {
        $(function () {
            $("body").floatingAd({
                tag: '<IFRAME SRC="http://ads.networkhm.com/tt?id=3283839" FRAMEBORDER="0" SCROLLING="no" MARGINHEIGHT="0" MARGINWIDTH="0" TOPMARGIN="0" LEFTMARGIN="0" ALLOWTRANSPARENCY="true" WIDTH="300" HEIGHT="250"></IFRAME>',
                tagWidth: 320,
                tagHeight: 270,
                lockCenter: false,
                lockBottom: true,
                speed: 600,
                left: 800,
                smallBtn: true
            });
        });
    });
</script>

Once you clicked on the submit button, and there was no errors in the process, you’ll get a success alert, then you’ll watch something like:

URLs Added to the List

Now you have a new url generated, but before watching your creative in the testing template, you must realize one step more. Just click on the Url list button!

As you can see, our first url is already in the list, moreover you have another one additional action, that's what I had mentioned before.

The generate url action generates a private url as much as a public url. Those are really necessary because the private urls are just allowed for registered users (Harrenmedia users), and the public urls may be shared with your customers for example, etc.

Enabling URLs

Just click on generate url in order to generate and enable the new one.

As you can see, the new url was generated for the creative you added before, and a new public url was created as well. Now, let’s take a look at each one of them!

URL Types

Private Url: As I had mentioned before, only harrenmedia users have access to this url, clicking on the button you will be redirected to the testing template and your creative will be loaded on it, if you look at the url route in your browser, you’ll notice that the url is formed by the project hostname plus an encrypted hash that belongs to your creative, that hash is taken straight from the database.

Public Url: The public url has a quite different structure at the moment of its creation, unlike the private url, this one is formed by the local language plus the project’s business hostname plus an encrypted hash which is quite different from the private url as well, however the same belongs to your creative. This type of url is public, as its name indicates, so you can send it to your client or anyone else you want to watch your creative in action.

As you can see, the way of using this app was really easy and you did not get any error in the process.

If you got any suggestion to this app or want to contribute somehow, feel free to let us know at systems@harrenmedia.com.