Shareables Archives

How to Add Google Analytics 4 to Google Tag Manager

Here’s how to implement a GA4 analytics tag through GTM.

I was recently installing Google Tag Manager on a client’s website and implementing the new GA4 Google Analytics tracking tag but realized finding documentation on it was very difficult. After some searching I found this very good walkthrough by Integress.

I’ve regurgitated just the GA4 parts below.

Before getting started be sure to have your Measurement ID (G-XXXXXXXXXX) on hand, as you’ll need that to complete this installation.

Add Google Analytics 4 Tag to GTM

Click Tags on the left hand side, then click New
Give your tag a name, such as “Google Analytics – GA4”
Under Tag Configuration, choose the “Google Analytics: GA4 Configuration” tag type
Make sure Page View is selected under Track Type
Enter your Measurement ID (or select your GA4 Constant variable – see the optional section below)
Make sure that the checkbox next to “Send a page view event when this configuration loads” is checked
Make any necessary changes in the Fields to Set, User Properties, and Advanced Settings sections. These are optional advanced settings so you may not need to change any of these unless required in your measurement strategy.
Under Triggering, select the All Pages trigger
Click the blue Save button in the top right corner

GA4 Constant Variable (Optional)

Unlike with Universal Analytics, creating a Constant variable to store your GA4 Measurement ID is optional, but not required. If you are just starting out with GTM, your setup likely won’t benefit from creating this variable.

Creating a GA4 Constant variable makes adding your Measurement ID into other tags, triggers, and variables a little easier. It also makes it a little easier to find your GA4 Measurement ID without having to open Google Analytics.

To create a Constant variable, follow these steps:

Log into your GTM workspace by going to tagmanager.google.com
Click Variables on the left
Under “User-Defined Variables,” click New
Give your variable a name. In my case, something like “GA4 Measurement ID – Prod”
Add a “Constant” variable type
Enter your Google Analytics 4 Measurement ID (It starts with “G-”).
Click the blue Save button in the top right corner.
You can now choose this variable as your Measurement ID in your Google Analytics 4 Configuration tag. See step 5 in the section above.

Embed Hulu Videos on Your WordPress Website

Unfortunately Hulu provides very little documentation on embedding or utilizing their player on your website and because of that I’ve captured what I was able to find and provided it for you here. Cheers!

<iframe src="https://www.hulu.com/embed.html?eid=771496" width="512" height="288" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

If you’re using WordPress, first of all, your smart, second of all, you’ll have access to the following handy shortcodes. Easy peezy.

Video URL or ID:

<!-- Using Full URL -->
[hulu https://www.hulu.com/watch/771496]

<!-- Using Hulu ID -->
[hulu id=771496]

Video Size:

The default width and height of the embedded video is based off the content width of your theme. To change the size of the video player, for example to 300 pixels wide, use “width” in your shortcode, as follows:

<!-- Explicit Width -->
[hulu https://www.hulu.com/watch/771496 width=300]

Thumbnail Image:

Have a particularly funny frame that you want displayed on the player before the video starts playing? Just use thumbnail_frame to specify the specific frame of video you want to display. Again, this is measured in seconds. Here – we’ll choose one with Kevin Smith making a funny face:

<!-- Specified Frame for Thumbnail -->
[hulu https://www.hulu.com/watch/771496 thumbnail_frame=48]

Playback start and end points:

Only want to play 15 seconds of a 22 minute clip? No problem! Just use start_time and end_time in your shortcode, like this:

<!-- Specified Start and End Time -->
[hulu https://www.hulu.com/watch/771496 width=300 start_time=50 end_time=65 thumbnail_frame=48]

Source: https://en.support.wordpress.com/videos/hulu/

Pixabay Offers Free High Quality Videos

The other day I stumbled across Pixabay which provides free high quality videos for creatives …

The other day I stumbled across Pixabay which provides free high quality videos for creatives like you and me. Check them out here.

Create Custom Twitter Widget with Pagination Through Tweets

A block of code that allows you to create a twitter feed in a PHP environment. Enjoy!

You’ll first want to create a Twitter App to get your access token, access token secret, consumer key, and consumer secret for authentication later.

You’ll also want to download TwitterAPIExchange.php as you’ll need to ‘require()’ that later.

Create a file named initialize.php and put on your server. Include the following functions in it as you’ll need to use them for the feed/widget later.

<?php
require_once( 'initialize.php'); // include the functions you need
require_once( 'TwitterAPIExchange.php'); // include the twitter api
// validate the widget with you credentials
$settings = array(
    'oauth_access_token' => "xxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxx",
    'oauth_access_token_secret' => "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    'consumer_key' => "xxxxxxxxxxxxxxxxxxxxxx",
    'consumer_secret' => "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
);
$url = 'https://api.twitter.com/1.1/search/tweets.json';
$requestMethod = 'GET';
// here we are scrubbing the url for the parameters but if none
// exist we are setting a search, a screen name, and a tweet
// count (per page)
$getfield = $_SERVER['QUERY_STRING'] ? '?'.$_SERVER['QUERY_STRING'] : '?q=kubashi&screen_name=kubashi&count=2';
$twitter = new TwitterAPIExchange($settings);
$store = $twitter->setGetfield($getfield)->buildOauth($url, $requestMethod)->performRequest();
$result = json_decode($store);
$multi_array = objectToArray($result);
?>
<ul class="tweets">
    <?php
    // Here's where the magic happens. We will loop through
    // the array given in '$multi_array' and set our tweet layout
    foreach($multi_array['statuses'] as $key => $value ){ ?>
        <?php
        $user = $value['user'];
        $entities = $value['entities'];
        $tweet = links($value["text"]); //converts text links to clickable links
        ?>
        <li class="tweet">
            <div class="text">
                <?php echo $tweet; ?>
            </div>
            <?php if($entities['media']){ ?>
                <?php foreach($entities['media'] as $offset => $entity){ ?>
                    <?php if($entity['media_url'] < 2){ ?>
                        <div class="media lurch">
                        </div>
                    <?php } ?>
                <?php } ?>
            <?php } ?>
            <div class="time"><?php echo twitter_time($value['created_at']); ?></div>
            <div class="action">
                <a href="https://twitter.com/intent/tweet?in_reply_to=<?php echo $value['id_str']; ?>">Reply</a>
                <a href="https://twitter.com/intent/retweet?tweet_id=<?php echo $value['id_str']; ?>">Retweet</a>
            </div>
        </li>
    <?php } ?>
</ul>
<!-- this simple but sexy button allows you to paginate through your tweets -->
<a href="<?php echo $multi_array['search_metadata']['next_results']; ?>">Next</a>

With some cool ajax requests you could do one of those nifty infinite loops. Hopefully this gives you all a base for some really cool implementations. Cheers!

Tags: Custom Widget, Twitter Widget

Set Limits on WordPress Content for Excerpts

Need to set some character limits on Wordpress content? Here are a couple nifty scripts to do just that.

<?php
// excerpt
function excerpt($limit) {
    $excerpt = explode(' ', get_the_excerpt(), $limit);
    if (count($excerpt)&gt;=$limit)
    {
        array_pop($excerpt);
        $excerpt = implode(" ",$excerpt).'...';
    }
    else
    {
        $excerpt = implode(" ",$excerpt);
    }
    $excerpt = preg_replace('`\[[^\]]*\]`','',$excerpt);
    return $excerpt;
}
?>

<?php
// content
function content($limit)
{
    $content = explode(' ', get_the_content(), $limit);
    if (count($content)&gt;=$limit)
    {
        array_pop($content);
        $content = implode(" ",$content).'...';
    }
    else
    {
        $content = implode(" ",$content);
    }
    $content = preg_replace('/\[.+\]/','', $content);
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]&gt;', ']]&gt;', $content);
    return $content;
}
?>

Tags: Character Limits, Excerpt

Moving Files from One Server to Another *Nix

Site migration can be awful cumbersome at times. I recently had to move a client’s site from off their old host to a new one and wanted to expedite the process of moving a million image files. Here’s a dandy little script that saved me hours.

Open up a new terminal window and use the following commands (you’ll have to be sure the connecting server allows SSH connections before performing the following remote commands):

Remote Server to Local Folder

rsync -avz [email protected]:target_folder/ destination_folder/

Local Folder to Remote Server

rsync -avz target_folder/ [email protected]:destination_folder/

Remote Server to Remote Server

rsync -avz [email protected]:target_folder/ [email protected]:destination_folder/

Local Folder to Local Folder

rsync -avz target_folder/ destination_folder/

You will then be prompted to use the password to the connecting server. Voila!

Source: http://superuser.com/questions/290634/copy-folders-from-one-unix-server-to-another

Social Media PNG and SVG Pack

I made this really simple vector icon set for peeps who wanted a unified set for their websites.

Download Fork

Update 10/12/20: Replaced EPS version with SVG

Update: Since I’ve included a few non-social media icons I’ve done the only proper thing – and that is to shamelessly plug myself and call the package the DAP Icons set.

I’ve updated every icon (although some changes were very minute) and added PayPal (the only icon included with alpha transparency due to lack of fully black/white version) and a location pin by request. Please submit any other icon request to the comments below.

SN: I’ve take liberty to update the Google Plus icon to the new and ‘improved’ version.

Tags: Black, Black & White Icons, Icons, Instagram, Instagram Black & White, Instagram Icons, Instagram Logo, Social Media, What's App, White

Symbol 8 – “I Thought You Wanted To Dance”

I recently visited my sister, who had done some searching, and had come across a single from my Dad’s old funk band Symbol 8 called “I Thought You Wanted To Dance”.

In the song, my dad sings belts out a pretty smooth second verse and throws in some adlibs throughout the song—smooth as the Motown sound. FYI, Symbol 8 was featured on American Band Stand in the late 70’s while signed to a label called Janus Records. Unfortunately, the label fizzled and the group was forced to disband. Big ups to Charlie Adams on this one though!

My dad was the lead vocalist for the band and played several instruments, including his most notable instrument, the sax. When my sister played the track, I could hardly recognize the soulful voice singing at the beginning of the second verse. It sounded like something straight off of a “Best of the 70’s” album.

It’s bittersweet to think that things didn’t turn out big for the group the way my dad had originally planned but then again I would have never been here (as in never been born).

Symbol 8 – I Thought You Wanted To Dance

Update: The music has been remastered as a 12″ rerelease!

Purchase: http://athensofthenorth.bigcartel.com/

Tags: Charlie Adams III, Funk, I Thought You Wanted To Dance, Michael Birzon, Symbol 8